Question

我有一个可滚动的div，当我滚动时，我需要检测div中当前可见的项目。我找到了许多解决方案，可以查看特定元素是否在视口中。我需要一个只显示哪个项目可见的函数，而不必指定特定元素。该函数必须检查可见项是否具有特定类，并且它应该显示具有该类名的哪个元素是可见的。

我现在有这个：

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

但是，根据特定元素的可见性，它返回true或false。我需要一个抓取当前可见元素的函数（并返回该元素）。

我怎样才能做到这一点？

修改 @starky的回答正是我所需要的，但我还需要能够从元素的数据属性中获取数据。添加data（）方法会返回一个错误，指出data（）不是函数（我不理解这个方法会返回一个HTML元素。）如何访问返回元素的属性？

Answer 1

使用jQuery：

$('*').filter(function() {
    return isScrolledIntoView(this);
});

您可以更改通配符*选择器以匹配任何元素集。例如，如果您只想获得可见按钮，则可以写：

$('button').filter(function() {
    return isScrolledIntoView(this);
});

检查视口中哪个元素可见（如果特定元素可见，则不是这样）

1 个答案: