当 div 滚动到它时显示

在网页中，我们有时需要实现这样一个功能：当用户滚动页面时，页面中的某个 div 元素滚动到用户的视图范围之内时，该元素才被显示出来。这是一种非常常见的需求，可用于实现懒加载、滑动加载更多等功能，本文将介绍如何实现这一功能。

使用 IntersectionObserver 接口

在过去，我们通常使用 scroll 事件来监听用户的滚动行为，并根据当前元素在视图中的位置来确定是否需要显示该元素。但是，使用 scroll 事件有几个问题：

• scroll 事件会在用户滚动页面时触发非常频繁，并且需要频繁计算元素的位置，这会导致性能问题。
• 当页面中有多个需要监听的元素时，我们需要为每个元素都添加对应的 scroll 监听器，这会导致代码冗余。

为了解决这些问题，现代浏览器提供了 IntersectionObserver 接口，该接口可以高效地检测元素是否与视图相交，并且可以同时监听多个元素。我们可以使用该接口来实现“当 div 滚动到它时显示”的功能。

IntersectionObserver 接口的使用方法比较简单：

1. 创建一个 IntersectionObserver 对象，传入一个回调函数。

   const observer = new IntersectionObserver(entries => {
     // do something when observed elements intersect
   });
   

2. 调用 observe 方法来监听需要监测的元素。

   const target = document.querySelector('#my-element');
   observer.observe(target);
   

3. 在回调函数中处理元素与视图相交的情况。

   const observer = new IntersectionObserver(entries => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
         entry.target.classList.add('show');
       } else {
         entry.target.classList.remove('show');
       }
     });
   });
   

在上述示例中，我们创建了一个 IntersectionObserver 对象，并传入了一个回调函数。在回调函数中，我们使用 forEach 遍历了所有的 entries（每个被监测的元素都会生成一个 entry）。对于每个 entry，我们检查 isIntersecting 属性来确定该元素是否与视图相交。如果相交，则将该元素添加 show 类名，否则移除 show 类名。

最后，我们将需要被监测的元素传入 observe 方法中，这样当该元素进入视图时，就会触发回调函数。

基于 IntersectionObserver 实现懒加载

使用 IntersectionObserver 接口实现懒加载也非常简单，我们只需要在回调函数中加载对应的图片即可。示例代码如下：

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target.querySelector('img');
      img.src = img.dataset.src;
    }
  });
});

const targets = document.querySelectorAll('.lazy-load');
targets.forEach(target => observer.observe(target));

在上述示例中，我们先获取了所有需要懒加载的元素，并遍历调用 observe 方法。在回调函数中，我们检查当前 entry 是否与视图相交，如果相交，则获取该元素中的 img 元素，将其 src 属性设置为 data-src，即可实现图片的懒加载。

总结

IntersectionObserver 接口在当 div 滚动到它时显示的功能实现中非常实用，它可以高效地检测元素与视图是否相交，并支持同时监听多个元素。使用 IntersectionObserver 接口可以避免使用 scroll 事件带来的性能问题，并且代码量更少、更易读。同时，该接口还可以实现图片的懒加载等常见功能。