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

<div class="page">    <div class="list">        <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 class="item"></div>        <div class="item"></div>        <div class="item"></div>        <div class="item"></div>    </div>    <div class="loading-box">    </div></div>

javascript

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

<div class="page">    <div class="list">        <div class="item"></div>        <!-- ... 其它的item -->    </div>    <div class="loading-box">    </div></div>

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

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

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

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

希望本文能够对您有所帮助，感谢您的阅读！

人人为我，我为人人，谢谢您的浏览，我们一起加油吧。