Question

此链接中的问题解答了如何在滚动后知道元素是否可见。（Check if element is visible after scrolling）。我的情况略有不同：我有一个滚动的 div ，其中有许多元素由id标识。在任何给定时间，我怎么知道哪一个是 div 中显示的顶级元素？我正在使用angular.js，所以我想到的是在我的范围内有一个变量，它不断更新滚动 div 中出现的顶部元素。

Answer 1

您可以创建一个挂钩到元素的scoll事件的指令，然后通过迭代所有子节点并将它们的offsetTop与它自己的offsetTop + scrollTop进行比较来检测最接近它的顶层1}}。

.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);
        }
    };
});

另请参阅此 short demo 。

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")
        }
    });
});

注意：我还没有测试过，所以也许有一个错字。干杯

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

2 个答案: