曝光埋点-（1）IntersectionObserver使用Demo

<!DOCTYPE html>
<html>

<head>
    <title>交叉观察器</title>
    <style type="text/css">
        #div1 {
            width: 300px;
            height: 200px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #div2 {
            height: 800px;
            width: 300px;
            background-color: #ddd;
            overflow: hidden;
        }

        .myDiv {
            margin-top: 50px;
            width: 50px;
            height: 50px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="div1">
        <div id="div2">
            <div class="myDiv">1</div>
            <div class="myDiv">2</div>
            <div class="myDiv">3</div>
            <div class="myDiv">4</div>
            <div class="myDiv">5</div>
            <div class="myDiv">6</div>
            <div class="myDiv">7</div>
            <div class="myDiv">8</div>
        </div>
    </div>
    <script>
        var observer = new IntersectionObserver(entries => {
            entries.forEach((item, index) => {
                if (item.intersectionRatio > 0.7) {
                    console.log(item.target)
                }
            });

            // observer.disconnect() // 统计到就不在需要继续观察了
        }, {
                threshold: [0.7]  // 只要展现面积达到 70% 的元素 
            });

        let newArr = Array.from(document.querySelectorAll("#div2 .myDiv"));
        newArr.forEach(item => observer.observe(item))



        // callback 回调函数
        // option 配置对象
        // var io = new IntersectionObserver(callback, option);

        // 开始观察
        // io.observe(document.getElementById('myDiv'));
        // observe的参数是一个 DOM 节点对象。如果要观察多个节点，就要多次调用这个方法。

        // // 停止观察
        // io.unobserve(document.getElementById('myDiv'));

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


    </script>
</body>

</html>

IntersectionObserver 封装

function observerHandle(elements, callback) {
    let observer = new IntersectionObserver( entries => {
        entries.forEach((item) => {
            if(item.intersectionRatio > 0.7) {
                let idx = item.target.dataset.idx;
                idx = idx ? parseInt(idx, 10) : 0;
                typeof callback === "function" && callback(idx);
            }
        });
    }, { 
        threshold: [0.7]
    }); 

    observer.POLL_INTERVAL = 50;
    
    Array.from(elements).forEach(el => observer.observe(el));
}

参考链接 <a herf="https://xgfe.github.io/2017/10/18/lulutia/IntersectionObserver/"></a>

posted @ 2019-08-09 11:18 yhQuan 阅读(786) 评论(0) 编辑收藏举报

yhQuan

漫记日常微末

曝光埋点-（1）IntersectionObserver使用Demo

公告