现代浏览器【滑动加载】终极API【IntersectionObserver】

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，不妨试试它吧！

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

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