day217-Intersection Observer

要点

  1. 简介
  2. Options
  3. Callback

简介

异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法。

Intersection Observer API会注册一个回调方法,每当期望被监视的元素进入或者退出另外一个元素的时候(或者浏览器的视口)该回调方法将会被执行,或者两个元素的交集部分大小发生变化的时候回调方法也会被执行。

Options

var options = {
root: document.querySelector('#scrollArea'), // 所监听对象的具体祖先元素(element) ,只读
rootMargin: '0px', // 计算交叉时添加到根(root)边界盒bounding box的矩形偏移量,只读,主要用途之一就是用来实现提前加载,提前几百像素预先加载
threshold: 1.0 // 包含阈值的列表,如[0, 0.25, 0.5, 0.75, 1], 列表中的每个阈值都是监听对象的交叉区域与边界区域的比率,只读
}

var observer = new IntersectionObserver(callback, options);

Callback

var callback = function(entries, observer) { 
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// target element:
// entry.boundingClientRect
// entry.intersectionRatio
// entry.intersectionRect
// entry.isIntersecting // 判断target元素在root元素中的可见性是否发生变化,isIntersecting 是 true,target元素的至少已经达到thresholds属性值当中规定的其中一个阈值
// entry.rootBounds
// entry.target
// entry.time
});
};

参考

IntersectionObserver API-紫云飞

Intersection Observer API-MDN

谈谈IntersectionObserver懒加载

文章作者: lmislm
文章链接: http://lmislm.com/2019/08/18/2019-08-18/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog