快捷導(dǎo)航

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

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

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

前言

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

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

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

概念

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

使用

IntersectionObserver接收2個(gè)參數(shù)callback和options。具體可見(jiàn)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
                // 目標(biāo)元素的區(qū)域信息，getBoundingClientRect()的返回值
                // entry.intersectionRatio
                // 目標(biāo)元素的可見(jiàn)比例
                // entry.intersectionRect
                // 目標(biāo)元素與根元素交叉的區(qū)域信息
                // entry.isIntersecting
                // 目標(biāo)元素是否進(jìn)入根元素區(qū)域
                // entry.rootBounds
                // 根元素的矩形區(qū)域信息
                // entry.target
                // 被觀(guān)察dom節(jié)點(diǎn)
                // entry.time
                // 相交發(fā)生時(shí)距離頁(yè)面打開(kāi)時(shí)的毫秒數(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版解決該問(wèn)題。