在JavaScript/jQuery中,滚动时是否可以跟踪页面上多个HTML元素的可视性?
我正在做一个项目,我正在跟踪页面上的某些元素当前是否在视图中。迄今为止,我已:在JavaScript/jQuery中,滚动时是否可以跟踪页面上多个HTML元素的可视性?,javascript,jquery,html,css,scroll,Javascript,Jquery,Html,Css,Scroll,我正在做一个项目,我正在跟踪页面上的某些元素当前是否在视图中。迄今为止,我已: // 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 invisib
// 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");
}
});
});
假设页面上有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);
};
或
一般来说,当您使用jQuery时,您不会使用
queryselectoral()
,这与此目的背道而驰。您也不会使用for循环迭代元素数组,您会使用jQuery的。each()
。这如何允许跟踪多个元素(可能最多50…)元素,如果一次在页面上看到多个元素,这是必需的?这是一个选择器。它的目的是选择浏览器视口中的元素。一次可以选择的元素数量没有上限。我不确定“跟踪”是什么意思但是,我强烈建议Waypoints.js在滚动到元素时触发一个函数:
$.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();
});
});