检查以查看哪个元素在视口中可见（如果特定元素可见，则不可见）

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（）方法会返回一条错误消息，指出data（）不是函数（由于该方法返回HTML元素，因此我不理解。）如何访问返回元素的属性？

Answer 1

使用jQuery：

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

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

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