javascript - 检查哪个元素在视口(viewport)中可见(而不是特定元素是否可见)

Question

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

我现在有这个:

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() 方法会返回一个错误，指出 data() 不是一个函数(我不明白，因为此方法返回一个 HTML 元素。)如何访问返回元素的属性？

Answer 1

使用 jQuery:

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

您可以更改通配符 * 选择器以匹配任何元素集。例如，如果你只想获取可见的按钮，你可以这样写:

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