使用IntersectionObserver 实现：自动监听元素是否进入了设备的可视区域之

木木哒

IntersectionObserver (自动监听元素是否进入了设备的可视区域之内)

示例：

1. const io = new IntersectionObserver(callback, option);
3. // 获取元素
4. const target = document.getElementById("dom");
5. // 开始观察
6. io.observe(target);
8. // 停止观察
9. io.unobserve(target);
11. // 关闭观察器
12. io.disconnect();

复制代码

vue示例：

1. const className = 'enterpage';
3. const directives = {
4.   viewport: {
5.     inserted: function (el, binding, vnode) {
6.       // 设置观察器选项
7.       const options = {
8.         root: null, // 使用视窗作为根
9.         rootMargin: '0px', // 根边界盒与目标边界盒之间的边距
10.         threshold: 0.4 // 交叉比例（即目标元素的可见区域占比）
11.       };
13.       // 创建一个新的 Intersection Observer 实例
14.       const observer = new IntersectionObserver((entries, observer) => {
15.         // 遍历所有观察目标的条目
16.         entries.forEach((entry) => {
17.           // 如果目标元素的交叉比例大于 0（即部分可见）
18.           if (entry.isIntersecting) {
19.             console.log('可见了');
20.             // 添加 class
21.             el.classList.add(className);
22.           }
23.         });
24.       }, options);
26.       // 使用观察器观察目标元素
27.       observer.observe(el);
29.       // 组件销毁时停止观察
30.       vnode.context.$once('hook:beforeDestroy', function () {
31.         observer.unobserve(el);
32.       });
33.     },
34.     unbind(el) {
35.       // 移除 class
36.       el.classList.remove(className);
37.     }
38.   }
39. };
41. export default directives;

复制代码

上面示例表示，当某个元素进入到可视范围内，给当前元素添加一个类名，这个类名可以给当前元素添加一些动画效果之类的。

来源:https://www.cnblogs.com/moqiutao/p/18412877
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！