在JavaScript/jQuery中，是否有可能在滾動時跟蹤頁面上多個HTML元素的可見性？

Question

我正在研究一個項目，我正在跟蹤頁面上的某些元素當前是否在視圖中。迄今爲止，我有：

// wait til code loads so it can grab DOM elements 
$(window).load(function() { 
    // scrolling... 
    $(window).scroll(function() { 
    // do this if any of the element is within view; otherwise, it is invisible 
    if (($('div').offset().top < ($(window).height() + $(window).scrollTop())) && (($('div').offset().top + $('div').height()) > $(window).scrollTop())) { 
     console.log($('div').attr('class') + " visible"); 
    } else { 
     console.log($('div').attr('class') + " invisible"); 
    } 
    }); 
}); 

這準確地跟蹤一個元件，被加載到所述頁中的第一div。訣竅是使用類似於var element = document.querySelectorAll('div');的東西來收集數組。但是，我的實施仍然不成功：

$(window).load(function() { 
    var elems, i; 
    // select all div elements 
    elems = document.querySelectorAll("div"); 
    // iterate through array 
    for (i = 0; i < elems.length; i++) { 
     document.addEventListener("scroll", function() { 
      if (($(elems[i]).offset().top < ($(window).height() + $(window).scrollTop())) && (($(elems[i]).offset().top + $(elems[i]).height()) \ 
> $(window).scrollTop())) { 
       console.log($(elems[i].html()) + " visible"); 
      } else { 
       console.log($(elems[i]).html() + " invisible"); 
      } 
     }); 
    } 
}); 

讓我們假設頁面上有5個div。是否有可能同時跟蹤每個div的可見度（或者我們選擇用document.querySelectorAll("...")選擇的任何可見度？

我很感激這個幫助，並且我希望很多人都可以給這個代碼一個鏡頭，因爲它是很有趣一起工作

Answer 1

我敢肯定已經有，做一個插件（和我勸你去尋找一個），但解釋的緣故！

$.expr[':'].inview = function(a, i, m) { 
    var $win = $(window), 
     $elem = $(a), 
     viewportTop = $win.scrollTop(), 
     viewportBottom = viewportTop + $win.height(), 
     elemTop = $elem.offset().top, 
     elemBottom = elemTop + $elem.height(); 

    return (elemTop >= viewportTop && elemTop < viewportBottom) || 
      (elemBottom > viewportTop && elemBottom <= viewportBottom); 
}; 

現在您可以：

$(function() { 
    $(window).scroll(function() { 
     $("div:inview").whatever(); 
    }); 
}); 

或

$(function() { 
    $(window).scroll(function() { 
     $("div:not(:inview)").whatever(); 
    }); 
});