IntersectionObserver 介绍
IntersectionObserver 是一个浏览器提供的 API，用于监测一个元素是否进入或者离开了另一个元素（通常是可视区域）。这个 API 可以用于实现懒加载、无限滚动等交互效果，能够在性能上有所提升，因为它可以在浏览器中异步地观察元素的可见性变化。
使用IntersectionObserver观察实现加载更多
<body>
<div class="list-box" style="border: 1px solid red; height: 5000px;"></div>
<div class="loading">加载更多</div>
<script>
/**
* @entries：观察的对象数据
* @root：执行节点交叉 默认视口
* @threshold：重叠多少/交叉多少0到1
* **/
const loadingDom = document.querySelector('.loading ');
const observer = new IntersectionObserver((entries) => {
const entry=entries[0]
//isIntersecting 是否有交叉
if(entry.isIntersecting){
console.log('开始执行加载更多逻辑');
}
}, {
root: null,使用默认的根元素（视窗）
threshold: 0.5,//元素可见度超过 50% 时触发回调
})
observer.observe(loadingDom)//注册观察
</script>
</body>
扫一扫
1541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
