在JavaScript / jQuery中，是否可以在滚动时跟踪页面上多个HTML元素的可见性

In JavaScript/jQuery, is it possible to track the viewability of multiple HTML elements on a page while scrolling?

本文关键字：可见性 元素 HTML 跟踪 jQuery JavaScript 是否 滚动      更新时间：2023-09-26

我正在做一个项目，我正在跟踪页面上的某些元素当前是否在视图中。到目前为止，我有： 

// 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("...")选择的任何内容？

我将不胜感激您的帮助，我希望很多人都能尝试一下这段代码，因为它使用起来非常有趣！

我很确定已经有一个插件可以做到这一点（我敦促你去寻找一个），但为了解释： 

$.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();
    });
});
相关文章：