阅读量:0
看到蛮多写IntersectionObserver的博客的，但是感觉里面关键部分都介绍的模棱两可，所以我来简单说说这个。至于什么是IntersectionObserver，官网上有 IntersectionObserver，我就不去一一阐述了，下面说最关键的点和使用场景！
new IntersectionObserver( function (entries) { // entries[0].isIntersecting }, { rootMargin: "0px 0px 0px 0px" } )关键点
设置上边距，当前元素的下边框监测会更早出现更晚消失。
设置下边距，当前元素的上边框监测会更早出现更晚消失。
并且rootMargin必须要设置px或者百分比，这百分比是相对视口高度来说的，所以说一般建议使用px，如："30px 0px 0px 0px" 或者 "10% 0px 0px 0px"，必须要带px，不能只写数值否则无效。
场景
有预懒加载的地方大概率会使用到IntersectionObserver，比如向上滑动时，如果图片或者其他dom比较多时，当滑到才渲染可能来不及，所以需要提前一段距离就开始渲染
示例源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>IntersectionObserver-rootMargin</title> <style> * { padding: 0; margin: 0; } .white-dom { height: 710px; } #target { background: rgb(237, 28, 36); height: 100px; outline: 33px solid rgba(0, 0, 0, 0.2); } #info { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; } </style> </head> <body> <div class="white-dom"></div> <div id="target"></div> <div class="white-dom"></div> <span id="info">初始化</span> <script> const io = new IntersectionObserver( function (entries) { console.log('IntersectionObserver触发'); document.getElementById("info").innerHTML = entries[0].isIntersecting ? "元素显示" : "元素隐藏"; }, { rootMargin: "0px 0px 33px 0px" } ); io.observe(document.getElementById("target")); </script> </body> </html> 