随着Web应用的不断发展，越来越多的开发者开始关注用户体验。其中之一就是元素是否在viewport中的监听，在这个需求下，W3C提供了新的IntersectionObserver API。
IntersectionObserver API简介
IntersectionObserver能够异步监听目标元素和其祖先元素或浏览器视口(viewport)的交叉情况，并且能够在交叉状态变化时执行回调函数。该API具有以下特点：
- 异步监听，减少性能开销
- 自动判断目标元素与祖先元素或viewport的交叉程度
- 不会阻塞主线程
IntersectionObserver使用方法
创建一个IntersectionObserver对象
const observer = new IntersectionObserver(callback, options);
- callback: 交叉状态变化时执行的回调函数
- options：配置交叉检查的一些参数，如root、rootMargin、threshold等，默认值为null
将目标元素加入监听列表
const target = document.querySelector('#target'); observer.observe(target);
observe()方法的参数为要监听的目标元素。
处理交叉状态变化的回调函数
-- -------------------- ---- ------- ----- -------- - --------- --------- -- - --------------------- -- - -- ---------------------- - ------------------- ----------- - ---- - ------------------- ----------- - --- --
展开代码IntersectionObserver回调函数的参数为一个entry数组，每个entry包含了目标元素与交叉区域的关系信息，其中isIntersecting属性表示元素是否与viewport相交。
实例代码
下面是一个简单的示例代码，演示如何通过IntersectionObserver API监听元素是否在viewport中，并改变元素的样式。
-- -------------------- ---- ------- ---- ------------------ ---- ------------------ ------ -------- ----- ------ - ---------------------------------- ----- -------- - --- ---------------------------- -- - --------------------- -- - -- ---------------------- - ---------------------------- - ------- - ---- - ---------------------------- - ------- - --- --- ------------------------- ---------展开代码
总结
使用IntersectionObserver API能够更加优雅地实现元素是否在viewport监听，不仅性能更好，而且代码也更简洁易懂。对于Web应用的用户体验来说，这是一个非常有价值的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33162
