IntersectionObserver 的介绍
IntersectionObserver 接口提供了一种异步观察目标元素与祖先元素或顶级文档 viewport 的交集中的变化的方法。祖先元素与视窗 viewport 被称为根(root)。
简单使用
这里在 PC 端 react 中使用下划加载更多举例
const [articleList, setArticleList] = useState<Article[]>(
articles.slice(currentPage, 5)
)
const [loadMoreLoading, setLoadMoreLoading] = useState(false)
const ob = useRef<IntersectionObserver>()
// 触底加载更多
useEffect(() => {
// 获取底部的dom元素
const footer = document.querySelector('#footer-container')
// 创建实例对象
ob.current = new IntersectionObserver(
(entries) => {
// entries里面是多个观察对象，我们这里只观察了footer一个
const observedTarget = entries[0]
//observedTarget.isIntersecting === true为进入状态
// 不需要离开时也加载更多，且还在加载中也不需要加载
if (observedTarget.isIntersecting && !loadMoreLoading) {
loadMore() //加载更多的函数
}
},
{
// 所监听对象的具体祖先元素 (element)。如果未传入值或值为null，则默认使用顶级文档的视窗。
root: null,
// 取值0~~1之间,监听对象的交叉区域与边界区域的比率
threshold: 0.9,
}
)
// 被观察的元素
ob.current.observe(footer!)
return () => {
// 取消观察
ob.current?.disconnect()
}
}, [])
useEffect(() => {
if (articleList.length >= articles.length && ob.current) {
// 取消观察
ob.current.disconnect()
}
}, [articleList, articles.length])
