检查哪些元素在视口中可见（不是如果特定元素可见）

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。我需要一个抓取当前可见元素的函数（并返回该元素）。

我该如何做到这一点？

编辑 @斯塔基的回答是正是我需要的，但我也需要能够从元素的数据属性获取数据。添加data（）方法返回一个错误，说data（）不是函数（我不明白，因为这个方法返回一个HTML元素。）我怎样才能访问返回的元素的属性？

Answer 1

使用jQuery：

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

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

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