<!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>
<a herf="https://juejin.im/post/5ca15c1e51882567b544ee0b"></a>
<a herf="https://www.cnblogs.com/ziyunfei/p/5558712.html"></a>