IntersectionObserver 元素可见判断
最后更新于：2022-04-02 03:27:03
[TOC]
## 概述
## 回调函数的参数说明
`callback`会触发两次。一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）
```
{
time: 3893.92,
rootBounds: ClientRect {
bottom: 920,
height: 1024,
left: 0,
right: 1024,
top: 0,
width: 920
},
boundingClientRect: ClientRect {
// ...
},
intersectionRect: ClientRect {
// ...
},
intersectionRatio: 0.54,
target: element
}
time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
target：被观察的目标元素，是一个 DOM 节点对象
rootBounds：容器元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有容器元素（即直接相对于视口滚动），则返回null
boundingClientRect：目标元素的矩形区域的信息
intersectionRect：目标元素与视口（或容器元素）的交叉区域的信息
intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
```
## 判断是否可见
```
new IntersectionObserver(
function (entries) {
// 如果不可见，就返回
if (entries[0].intersectionRatio <= 0) return;
loadItems(10);
console.log('Loaded new items');
}
);
```
## 实例
## hello world
Document
### 惰性加载（lazy load）
//js
function query(selector) {
return Array.from(document.querySelectorAll(selector));
}
var observer = new IntersectionObserver(
function(entries) {
entries.forEach(function(entry) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
});
}
);
query('.lazy-loaded').forEach(function (item) {
observer.observe(item);
});
```
### 无限滚动
### 视频自动播放
';
main.html
```### 惰性加载（lazy load）
main.html
``` // html
//js
function query(selector) {
return Array.from(document.querySelectorAll(selector));
}
var observer = new IntersectionObserver(
function(entries) {
entries.forEach(function(entry) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
});
}
);
query('.lazy-loaded').forEach(function (item) {
observer.observe(item);
});
```
### 无限滚动
main.html
``` var intersectionObserver = new IntersectionObserver( function (entries) { // 如果不可见，就返回 if (entries[0].intersectionRatio <= 0) return; loadItems(10); console.log('Loaded new items'); } ); // 开始观察 intersectionObserver.observe( document.querySelector('.scrollerFooter') ); ```### 视频自动播放