使用IntersectionObserver进行曝光打点

Posted 2021-05-17 地铁程序员

网页开发时，常常需要了解某个元素是否进入了"视口"（viewport），即用户能不能看到它。

IntersectionObserver是浏览器原生提供的构造函数：

import\'intersection-observer\';
export default {
    async mounted() {
        await this.$nextTick()
        var io = new IntersectionObserver(entries => {
            console.log(entries)
        },{
            threshold: [0, 0.25, 0.5, 0.75, 1]
        });
        io.POLL_INTERVAL = 100; // Time in milliseconds.
        io.observe(this.$refs.content)

    }
}

　　

　　上面代码中，IntersectionObserver，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。

 　　intersection-observer是做兼容处理的。

// 开始观察
io.observe(document.getElementById(\'example\'));

// 停止观察
io.unobserve(element);

// 关闭观察器
io.disconnect();

　　

IntersectionObserverEntry对象提供目标元素的信息，一共有六个属性。

time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
target：被观察的目标元素，是一个 DOM 节点对象
rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
boundingClientRect：目标元素的矩形区域的信息
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0

　　

参考：https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver