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

示例：

<code>const io = new IntersectionObserver(callback, option);

// 获取元素

const target = document.getElementById("dom");

// 开始观察

io.observe(target);

// 停止观察

io.unobserve(target);

// 关闭观察器

io.disconnect();

vue示例：

const className = 'enterpage';

const directives = {

viewport: {

inserted: function (el, binding, vnode) {

// 设置观察器选项

const options = {

root: null, // 使用视窗作为根

rootMargin: '0px', // 根边界盒与目标边界盒之间的边距

threshold: 0.4 // 交叉比例（即目标元素的可见区域占比）

};

// 创建一个新的 Intersection Observer 实例

const observer = new IntersectionObserver((entries, observer) => {

// 遍历所有观察目标的条目

entries.forEach((entry) => {

// 如果目标元素的交叉比例大于 0（即部分可见）

if (entry.isIntersecting) {

console.log('可见了');

// 添加 class

el.classList.add(className);

}

});

}, options);

// 使用观察器观察目标元素

observer.observe(el);

// 组件销毁时停止观察

vnode.context.$once('hook:beforeDestroy', function () {

observer.unobserve(el);

});

},

unbind(el) {

// 移除 class

el.classList.remove(className);

}

}

};

export default directives;

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