快捷導(dǎo)航

IntersectionObserver判斷是否在可視區(qū)域詳解

更新時間：2022年10月11日 14:03:31 作者：紅浴巾

這篇文章主要為大家介紹了IntersectionObserver判斷是否在可視區(qū)域詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

前言

在日常的開發(fā)過程中，有時候會有一些要求判斷節(jié)點是否進入可視化區(qū)域的需求。例如：判斷信息是否在可視區(qū)域曝光再進行曝光，圖片懶加載等。通常我們可以通過scroll和getBoundingclient來進行判斷。

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

但是scroll，getBoundingclient會引起回流，計算過于頻繁可能會引起很大的性能問題，例如用戶在使用的過程中，滑動卡頓啊等。那么有沒有更好的辦法來代替判斷是否進入可視化區(qū)域呢？使用IntersectionObserver即可解決這種煩惱。

概念

Intersection Observer API 提供了一種異步檢測目標元素與祖先元素或 viewport 相交情況變化的方法。瀏覽器顯示頁面的時候，首先會用js處理邏輯，然后進行樣式計算及布局，在內(nèi)存里面形成之后會畫我們的屏幕上去，這一個過程就叫1幀，如果1幀中任一個階段占用的時間過長，就會影響到我們的平均幀率，導(dǎo)致掉幀等。而IntersectionObserver會在瀏覽器空閑的時候，也就是幀空閑的時候才去執(zhí)行，不會一直占用我們的主線程，從而提高了性能及體驗。

使用

IntersectionObserver接收2個參數(shù)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
                // 目標元素的區(qū)域信息，getBoundingClientRect()的返回值
                // entry.intersectionRatio
                // 目標元素的可見比例
                // entry.intersectionRect
                // 目標元素與根元素交叉的區(qū)域信息
                // entry.isIntersecting
                // 目標元素是否進入根元素區(qū)域
                // entry.rootBounds
                // 根元素的矩形區(qū)域信息
                // entry.target
                // 被觀察dom節(jié)點
                // entry.time
                // 相交發(fā)生時距離頁面打開時的毫秒數(shù)
            });
        };
        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版解決該問題。