是否进入视口的使用场景还是很多的,一般第一时间想到的就是监听滚动,关键是scroll很密集,计算量很大,如果做个防抖节流性能还能优化一些,否则性能问题就很有可能发生。
IntersectionObserver这个API已经存在很多年了,从来没用过,兼容性几乎也不用考虑:
var io = new IntersectionObserver(callback, option); // 开始观察 io.observe(element); // 停止观察 io.unobserve(element); // 关闭观察器 io.disconnect();
观察多个节点: io.observe(element1); io.observe(element2);
callback是可见和不可见时的回调函数。刚刚进入视口(开始可见)和完全离开视口(开始不可见)会被触发,初始化不管可见不可见也会触发。参数entries是一个数组:
var io = new IntersectionObserver((entries) => {
console.log(entries)
})
io.observe(document.getElementById('test1'))
io.observe(document.getElementById('test2'))
几个参数:
boundingClientRect:
一个数组,默认[0],什么时候触发回调函数,即交叉比例(intersectionRatio):
var io = new IntersectionObserver((entries) => {
console.log(entries)
},{
threshold: [0, 0.5, 1]
})
在可见,可见50%,完全可见的时候触发回调。
所监听对象的具体祖先元素(element)。如果未传入值或值为null,则默认使用顶级文档的视窗。一般配合rootMargin使用。
计算交叉时添加到根(root)边界盒的矩形偏移量,可以有效的缩小或扩大根的判定范围从而满足计算需要。因为滚动可能是窗口也可能是容器,当设置是容器的时候,窗口滚动可能需要设置用来匹配内部需求。
var io = new IntersectionObserver((entries) => {
console.log(entries)
},{
root: document.getElementById('wrap'),
rootMargin: '100px 10px'
})
表示在容器内上下滚动距离可视范围100px的时候就触发回调,左右滚动距离10px的时候触发。
使用场景常用的应该是懒加载和滚动到底部加载更多,有了这个API,图片的懒加载也变得简单了,可能是出于兼容性的原因,现在懒加载和滚动到底部加载更多的库都没有使用。 之后要是有机会,我会直接使用这个API,实在兼容性不行的话再使用监听滚动。