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