我通过AJAX加载元素。其中一些只有当你向下滚动页面时才能看到。有什么方法可以知道元素现在是否在页面的可见部分?
当前回答
修改了已接受的答案,以便元素必须将其display属性设置为“none”以外的值,以便质量为可见。
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
var elemDisplayNotNone = $(elem).css("display") !== "none";
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && elemDisplayNotNone);
}
其他回答
推特斯科特道丁的酷功能为我的要求- 这是用来查找元素是否刚刚滚动到屏幕上,即它的上边缘。
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
如何
function isInView(elem){
return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}
之后,一旦元素出现在视图中,你就可以触发你想要的任何东西
$(window).scroll(function(){
if (isInView($('.classOfDivToCheck')))
//fire whatever you what
dothis();
})
这对我来说很好
其他答案通常不检查元素是否在视图中沿着X轴,即可能在当前视口Y范围内,但不在X范围内。这个函数检查X和Y是否显示在视口中:
function checkElInView(el) {
if (!el || !typeof el.getBoundingClientRect === "function") return false;
const r = el.getBoundingClientRect();
const vw = document.documentElement.clientWidth;
const vh = document.documentElement.clientHeight;
const inViewX = (r.left > 0 && r.left < vw) || (r.right < vw && r.right > 0);
const inViewY = (r.top > 0 && r.top < vh) || (r.bottom < vh && r.bottom > 0);
return inViewX && inViewY;
}
我只是想分享一下,我把这个和我的脚本结合起来移动div,这样它就总是在视图中:
$("#accordion").on('click', '.subLink', function(){
var url = $(this).attr('src');
updateFrame(url);
scrollIntoView();
});
$(window).scroll(function(){
changePos();
});
function scrollIntoView()
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $("#divPos").offset().top;
var elemBottom = elemTop + $("#divPos").height();
if (elemTop < docViewTop){
$("#divPos").offset({top:docViewTop});
}
}
function changePos(){
var scrTop = $(window).scrollTop();
var frmHeight = $("#divPos").height()
if ((scrTop < 200) || (frmHeight > 800)){
$("#divPos").attr("style","position:absolute;");
}else{
$("#divPos").attr("style","position:fixed;top:5px;");
}
}
我添加了我的代码修改。不幸的是,我可以看到每个人都在他们的版本,每个人都忽略了debance功能的使用。哪个答案是让你的事件不触发,例如,在滚动时每秒200次。
$(window).scroll(function(){
if (isInView($('.class'))){
debounce(
someFunction(), 5
)
}
});
function isInView(elem){
if(document.documentElement.clientWidth > 991){
return $(elem).offset().top - $(window).scrollTop() < $(elem).height();
}else {
doSometing;
}
}