gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-03 17:52:57 25 4
gpt4 key购买 nike

我正在做一个元素,我正在跟踪页面上的某些元素当前是否在 View 中。到目前为止,我有:

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

关于javascript - 在 JavaScript/jQuery 中,是否可以在滚动时跟踪页面上多个 HTML 元素的可见性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26921536/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com