檢查哪些元素在視口中可見（不是如果特定元素可見）

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