介绍
用于查看某个元素是否进入了视口（viewport），用户能否看到该元素
用法
// IntersectionObserver 为浏览器提供的构造函数
// 参数： callback 可见性变化时的回调函数 option 配置对象(可选)
let io = new IntersectionObserver(callback, option)
指定观察某个元素
// 开始观察
io.observe(element)
// 停止观察
io.unobserve(element)
// 关闭观察器
io.disconnect()
// 观察多个元素
io.observe(elementA)
io.observe(elementB)
参数详解
-callback参数
目标元素的可见性发生变化时，会触发callback回调函数。
callback回调函数一般会触发两次
- 目标元素刚刚进入视口（开始可见）
- 目标元素完全里开视口（开始不可见）
// entries 是一个数组，每个成员都是一个 IntersectionObserverEntry 对象。
// 如果同时有两个被观察的对象的可见性发生变化，entries 数组就会有两个成员
let io = new IntersectionObserver( entries => {
console.log(entries)
})
-
option参数-
threshold：数组，该属性决定了什么时候触发回调函数，默认为0// threshold: [0, 0.25, 0.5, 1] 表示当目标元素在 0% 25% 50% 200% 可见时，会触发回调函数 new IntersectionObserver( entries => {}, { threshold: [0, 0.25, 0.5, 1] })
IntersectionObserver API支持容器内滚动，一下两个参数为在容器内滚动时可设置的option参数。-
root：IntersectionObserver API支持容器内滚动。root属性指定目标元素所在的容器元素（即根元素）。注：容器元素必须是目标元素的祖先节点 -
rootMargin：定义根元素的margin，用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域大小。它使用css的定义方法，比如1px 4px 6px 8px，表示top、right、bottom、left四个方向的值
-
IntersectionObserverEntry 对象
-
IntersectionObserverEntry对象提供目标元素的信息，一共有六个属性-
time：可见性发生变化的时间，是一个高精度时间戳，单位：ms -
target：被观察的目标元素，是一个Dom对象
-rootBounds：根元素的矩形区域的信息，getBoundingClicentRect()如果没有根元素则返回null -
boundingClientRect：目标元素的矩形区域的信息 -
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息 -
intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0 -
isIntersecting：目标元素是否可见，Boolean值
-
实例
-
懒加载
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { height: 400px; background-color: blanchedalmond; margin-bottom: 30px; } </style> </head> <body> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> <div class="container"> <img src="" data-src="./1.jpg" alt=""> </div> </body> <script> let imgs = document.querySelectorAll('[data-src]') let io = new IntersectionObserver(entries => { entries.forEach(item => { if (item.intersectionRatio > 0) { let container = item.target container.src = container.dataset.src io.unobserve(container) } }) }) imgs.forEach(item => { io.observe(item) }); </script> </html> -
无限滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .item { height: 200px; } .item:nth-child(odd) { background-color: rgb(25, 120, 245); } </style> </head> <body> <div class="container"> <div class="item">哈哈哈哈哈哈</div> <div class="item">哈哈哈哈哈哈</div> <div class="item">哈哈哈哈哈哈</div> <div class="item">哈哈哈哈哈哈</div> <div class="item">哈哈哈哈哈哈</div> <div class="item">哈哈哈哈哈哈</div> </div> <div class="footer"></div> </body> <script> let footer = document.querySelectorAll('.footer')[0] let io = new IntersectionObserver(entries => { if(entries[0].isIntersecting) { let i = 6 while(i > 0) { let ele = document.createElement('div') ele.className = 'item' ele.innerText = '哈哈哈哈哈哈' document.querySelectorAll('.container')[0].appendChild(ele) i-- } } }) io.observe(footer) </script> </html>
注意事项
-
IntersectionObserver API是异步的，不随着目标元素的滚动同步触发。 -
IntersectionObserver的实现，采用requestIdleCallback()，即只有线程空闲下来，才会执行观察器。这个观察器的优先级非常低，只有其他任务执行完成，浏览器才会有空闲执行观察器。
网友评论