【滑动加载】终极API【IntersectionObserver】

https://www.toutiao.com/article/7245104761752633911/

现代浏览器【滑动加载】终极API【IntersectionObserver】
首发2023-06-16 11:20·PrvtSite
IntersectionObserver是一种非常强大的API，它可以用于实现滑动加载、无限滚动、懒加载等效果。使用IntersectionObserver API可以监听元素与视口是否交叉，从而实现在元素进入或离开视口时执行一些操作。

虽然IntersectionObserver在滑动加载方面非常强大，但并不是唯一的解决方案。在一些旧浏览器或一些特殊需求下，可能需要使用其他一些工具或技术来实现类似的滑动加载效果。总的来说，IntersectionObserver是一个非常优秀的API，它能够帮助我们实现流畅的视觉效果和更好的用户体验。

基本用法
IntersectionObserver的基本用法非常简单，只需要创建一个IntersectionObserver对象，然后调用observe方法观察需要监测的元素即可。下面是一个简单的示例：

const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
// 元素进入了视口
} else {
// 元素离开了视口
}
});
});

const target = document.querySelector(‘.target’);
observer.observe(target);
上面的代码中，我们创建了一个IntersectionObserver对象，然后调用observe方法观察了一个class为“target”的元素。当这个元素进入视口时，IntersectionObserver会调用回调函数，并传入一个entries参数，其中包含了所有被观察的元素的信息。我们可以通过判断entry.intersectionRatio的值来确定元素是否进入了视口。

除了基本用法外，IntersectionObserver还提供了一些高级功能，比如可以设置root元素、设置阈值等。下面我们来逐一介绍这些功能。

设置root元素
默认情况下，IntersectionObserver会将整个视口作为root元素来监测目标元素。但是在某些情况下，我们可能需要监测某个特定的元素是否进入了另一个元素的视口，这时就可以使用root选项来设置root元素。

const observer = new IntersectionObserver(entries => {
// 其它代码
}, {
root: document.querySelector(‘.container’)
});

const target = document.querySelector(‘.target’);
observer.observe(target);
上面的代码中，我们将class为“container”的元素设置为root元素，这样IntersectionObserver就会监测目标元素是否进入了“container”的视口。

设置阈值
IntersectionObserver还可以设置一个或多个阈值，用来决定何时触发回调函数。阈值是一个0~1之间的数字，表示目标元素进入视口的比例。比如，设置阈值为0.5表示当目标元素进入视口的面积达到50%时触发回调函数。

const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.intersectionRatio >= 0.5) {
// 目标元素进入了视口的50%以上
}
});
}, {
threshold: 0.5
});

const target = document.querySelector(‘.target’);
observer.observe(target);
上面的代码中，我们将阈值设置为0.5，表示当目标元素进入视口的面积达到50%以上时触发回调函数。

实现滑动加载
有了IntersectionObserver的帮助，实现滑动加载功能就非常简单了。我们只需要在滑动到页面底部时触发回调函数，然后加载下一页的内容即可。

举例：

css

.item {
width:100%;
background-color: cornflowerblue;
height: 60px;
margin-bottom:0.5rem;
}

.loading-box{height:50px;}
html

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 当被观察元素进入视口时执行的代码
layer.msg(‘进来了，开始添加新数据！’);
loadNextPage();
} else {
// 当被观察元素离开视口时执行的代码
}
});
});

const element = document.querySelector(‘.loading-box’);
observer.observe(element);

const loadNextPage = () => {
// 加载下一页的内容
const newDataTag = <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div>;

$(‘.list’).append(newDataTag);
}

上面的代码中，我们在回调函数中判断目标元素是否进入了视口（isIntersecting属性），如果是则调用loadNextPage函数加载下一页的内容。

bug调试
IntersectionObserver的用法还是比较简单。但是，有的时候你可能遇到，代码没有问题，程序就是没有正常跑起来。这种情况一般都是你的dom结构或者样式有问题。

继续上面的例子，举例：

css

html,
body,
.page,
.list {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.page {
display: flex;
}

.item {
width: 100%;
background-color: cornflowerblue;
height: 60px;
margin-bottom: 0.5rem;
}

.loading-box {
height: 50px;
}
html

真人真事：请看，视图还没有滑动的时候，就开始加载了。同时，滑动到最底部的时候，没有触发新的加载，为什么呢？

因为flexbox布局或其它布局方式，导致目标元素没有在它应该的位置。

修改相关dom或者样式，把目标元素放入它应该在的位置即可。

总的来说，IntersectionObserver是一个非常强大的API，可以帮助我们实现各种视口相关的功能，比如滑动加载、懒加载、动画触发等。如果您还没有使用过IntersectionObserver，不妨试试它吧！