我通过AJAX加载元素。其中一些只有当你向下滚动页面时才能看到。有什么方法可以知道元素现在是否在页面的可见部分?
当前回答
使用IntersectionObserver API
(在现代浏览器中本机)
通过使用观察器来确定一个元素在视口中是否可见,或者在任何可滚动的容器中是否可见,这是非常简单有效的。
无需附加滚动事件并手动检查事件回调,这更有效:
//定义一个观察者实例 var观察者= new IntersectionObserver(onIntersection, { Root: null, // default为视口 阈值:目标可见区域的。5 //百分比。触发“onIntersection” }) //在交集变化时调用回调函数 函数onIntersection(条目,opts){ 条目。forEach(入口= > entry.target.classList。切换(“可见”,entry.isIntersecting) ) } //使用观察者来观察一个元素 观察者。观察(document.querySelector('.box')) //停止观察: / / observer.unobserve (entry.target) 跨度{:固定;上图:0;左:0;} .box{宽度:100 px;身高:100 px;背景:红色;保证金:1000 px;过渡:综合成绩;} .box。可见{背景:绿色;这个特性:50%;} <span>纵向滚动&水平…< / span > < div class = '盒子' > < / div >
现代浏览器(包括移动浏览器)支持。IE - View浏览器支持表中不支持
其他回答
推特斯科特道丁的酷功能为我的要求- 这是用来查找元素是否刚刚滚动到屏幕上,即它的上边缘。
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}
简单修改可滚动的div(容器)
var isScrolledIntoView = function(elem, container) {
var containerHeight = $(container).height();
var elemTop = $(elem).position().top;
var elemBottom = elemTop + $(elem).height();
return (elemBottom > 0 && elemTop < containerHeight);
}
注意:如果元素大于可滚动的div,则此方法无效。
WebResourcesDepot在前段时间使用jQuery编写了一个滚动加载脚本。你可以在这里查看他们的现场演示。它们功能的关键在于:
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
lastAddedLiveFunc();
}
});
function lastAddedLiveFunc() {
$('div#lastPostsLoader').html('<img src="images/bigLoader.gif">');
$.post("default.asp?action=getLastPosts&lastPostID="+$(".wrdLatest:last").attr("id"),
function(data){
if (data != "") {
$(".wrdLatest:last").after(data);
}
$('div#lastPostsLoader').empty();
});
};
我们可以在使用ES6的现代浏览器中做这样的事情:
const isFullySeen = el => el &&
typeof el.getBoundingClientRect === 'function' &&
el.getBoundingClientRect()['bottom'] + window.scrollY <=
window.innerHeight + window.scrollY &&
el.getBoundingClientRect()['top'] + window.scrollY <=
window.innerHeight + window.scrollY;
这是我的纯JavaScript解决方案,如果它隐藏在一个可滚动的容器。
演示在这里(尝试调整窗口的大小)
var visibleY = function(el){
var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height,
el = el.parentNode
// Check if bottom of the element is off the page
if (rect.bottom < 0) return false
// Check its within the document viewport
if (top > document.documentElement.clientHeight) return false
do {
rect = el.getBoundingClientRect()
if (top <= rect.bottom === false) return false
// Check if the element is out of view due to a container scrolling
if ((top + height) <= rect.top) return false
el = el.parentNode
} while (el != document.body)
return true
};
编辑2016-03-26:我已经更新了解决方案,以考虑滚动过去的元素,所以它隐藏在可滚动容器的顶部。 编辑2018-10-08:更新到当滚动到屏幕上方的视图外时处理。