前言

在日常的开发过程中,有时候会有一些要求判断节点是否进入可视化区域的需求。例如:判断信息是否在可视区域曝光再进行曝光,图片懒加载等。通常我们可以通过scroll和getBoundingclient来进行判断。

el.offsetTop - document.documentElement.scrollTop <= 视口高度
// 或
el.getBoundingClientRect().top <= 视口高度

但是scroll,getBoundingclient会引起回流,计算过于频繁可能会引起很大的性能问题,例如用户在使用的过程中,滑动卡顿啊等。那么有没有更好的办法来代替判断是否进入可视化区域呢?使用IntersectionObserver即可解决这种烦恼。

概念

Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。浏览器显示页面的时候,首先会用js处理逻辑,然后进行样式计算及布局,在内存里面形成之后会画我们的屏幕上去,这一个过程就叫1帧,如果1帧中任一个阶段占用的时间过长,就会影响到我们的平均帧率,导致掉帧等。而IntersectionObserver会在浏览器空闲的时候,也就是帧空闲的时候才去执行,不会一直占用我们的主线程,从而提高了性能及体验。

使用

IntersectionObserver接收2个参数callback和options。具体可见MDN

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            border: 1px salmon solid;
            overflow-y: scroll;
        }
        .box2 {
            width: 100px;
            height: 1000px;
            background: red;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3" id="box3"></div>
    </div>
    <script>
        let options = {
            root: document.querySelector('#box1'),
            rootMargin: '0px',
            threshold: 1.0
        }
        let callback = (entries, observer) => {
            entries.forEach(entry => {
                // entry.boundingClientRect
                // 目标元素的区域信息,getBoundingClientRect()的返回值
                // entry.intersectionRatio
                // 目标元素的可见比例
                // entry.intersectionRect
                // 目标元素与根元素交叉的区域信息
                // entry.isIntersecting
                // 目标元素是否进入根元素区域
                // entry.rootBounds
                // 根元素的矩形区域信息
                // entry.target
                // 被观察dom节点
                // entry.time
                // 相交发生时距离页面打开时的毫秒数
            });
        };
        let observer = new IntersectionObserver(callback, options);
        let target = document.querySelector('#box3');
        observer.observe(target);
    </script>
</body>
</html>

浏览器兼容性

不兼容Safari 12.1以下和Firefox for Android 55以下,具体可以看MDN。 可以使用polyfill版解决该问题。

注意

当target元素已在root可视范围,但是被其他元素遮盖住了,该target是否被其他元素遮盖不可判断。

以上就是IntersectionObserver判断是否在可视区域详解的详细内容,更多关于IntersectionObserver 判断可视区域的资料请关注阿兔在线工具其它相关文章!

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部