如何知道div中显示的顶部元素是哪个

Question

此链接中的问题回答了如何知道滚动后元素是否可见。（滚动后检查元素是否可见）。我的情况略有不同：我有一个滚动的div，其中有许多元素由id标识。在任何给定的时间，我如何知道哪个元素是div中显示的顶部元素？我使用的是angular.js，所以我想在我的作用域中有一个变量，它会随着滚动div中出现的顶部元素不断更新。

Answer 1

您可以创建一个指令，该指令挂接到元素的scoll事件，然后通过迭代所有子级并将其offsetTop与其自身的offsetTop + scrollTop进行比较来检测最接近其顶部的事件。

.directive('detectClosestToTop', function ($timeout) {
    function findClosestToTop(root) {
        var closestElem;
        var closestTop = root.scrollHeight;
        var minTop     = root.offsetTop + root.scrollTop;
        [].forEach.call(root.children, function (child) {
            var childTop = child.offsetTop;
            if ((childTop >= minTop) && (childTop < closestTop)) {
                closestElem = child;
                closestTop  = childTop;
            }
        });
        return closestElem;
    }
    return {
        restrict: 'A',
        link: function (scope, elem) {
            // Create a the onScroll listener
            function detectClosest() {
                scope.closestToTop = findClosestToTop(elem[0]);
            }
            function onScroll() {
                scope.$apply(detectClosest);
            }
            // Register the listener and make sure we clean up,
            // when/if the element is removed
            elem.on('scroll', onScroll);
            scope.$on('$destroy', function () {
                elem.off('scroll', onScroll);
            });
            // Initialize `scope.closestToTop`,
            // after the content has been rendered
            $timeout(detectClosest);
        }
    };
});

---

另请参阅简短演示。

Answer 2

这取决于滚动div中的元素。。如果它们都是div，那么每次滚动时，你只需要这样计算：

$('.outer-div').scroll(function(){
    $('div').each(function(){
        if($('.outer-div').scrollTop() + $('.outer-div').height() > $(this).offset().top && $('.outer-div').scrollTop() < $(this).offset().top){
            console.log("shown in div")
        }
    });
});

注意：我还没有测试过，所以可能有打字错误。。干杯