滚动加载还在绑 scroll？你可能忽略了浏览器内置的“观察者”

ErpanOmer
409 阅读4分钟

在现代前端开发中，页面中某些元素是否出现在视口内，决定了懒加载、广告曝光、内容触发等一系列行为。最常见的做法当然是监听 scroll 事件，然后手动计算 getBoundingClientRect() 来判断元素是否进入视口。但这种方式有几个致命问题：

  • 性能瓶颈：每次滚动都触发计算，尤其是在移动端容易造成掉帧；
  • 逻辑复杂：你得手动处理各种边界情况、节流防抖；
  • 扩展性差：多个元素的观察逻辑容易耦合在一起。

这时你可能需要一个被严重低估的浏览器 API —— IntersectionObserver。它不仅能精准检测元素是否进入视口，而且在性能和代码维护上都有极大优势。

一、从传统监听说起：scroll + getBoundingClientRect 的旧时代

你肯定见过这样的懒加载实现：

window.addEventListener('scroll', () => {
  const rect = img.getBoundingClientRect();
  if (rect.top < window.innerHeight) {
    img.src = img.dataset.src;
  }
});

这个方法虽然直接有效，但问题是：

  • 滚动事件频繁触发；
  • 每次都要计算一次矩形区域；
  • 多图懒加载时代码非常重复；
  • 滚动速度快时容易漏判。

解决方案？IntersectionObserver 登场。

二、IntersectionObserver 到底是什么？浏览器中的“视口侦探”

定义：
IntersectionObserver 是一个浏览器原生提供的 API，它能异步监听一个元素是否进入另一个元素（或视口）中，并在进入/离开时触发回调。

基本使用：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('进入视口了');
    }
  });
});

observer.observe(document.querySelector('#target'));

它天生支持多个元素观察，并且不会在主线程上计算位置 —— 性能友好 + 精准 + 低侵入。

三、实际应用：图片懒加载最典型的场景

我们用它来做图片懒加载，一次解决所有 scroll 带来的问题。

<img data-src="real.jpg" class="lazy" />
<img data-src="another.jpg" class="lazy" />

const imgs = document.querySelectorAll('.lazy');

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      obs.unobserve(img); // 加载完成后取消监听
    }
  });
});

imgs.forEach(img => observer.observe(img));

优势一目了然：

  • 不需要手动滚动监听；
  • 浏览器统一调度；
  • 多图支持更优雅；
  • 一旦加载就自动取消监听，不浪费资源。

四、性能揭秘：为什么 IntersectionObserver 更快？

  • 异步处理：不像 scroll 那样立即执行，IO 的回调会在浏览器的布局和绘制完成后异步调用，避免干扰渲染流程。
  • 底层原生优化：浏览器内部通过 C++ 实现位置判断，而不是在 JavaScript 层重复计算。
  • 更少的内存压力：多目标只创建一个 Observer 实例，无需每个元素都绑定独立回调。

对于滚动复杂、图片众多的页面，IO 的性能提升可以用“质的飞跃”形容。

五、进阶玩法：广告曝光、动画触发、无限加载

1. 广告曝光计数

const ad = document.querySelector('#ad');
const observer = new IntersectionObserver(([entry]) => {
  if (entry.intersectionRatio > 0.5) {
    reportAdView(); // 比如发送曝光事件
  }
}, { threshold: 0.5 });

observer.observe(ad);

2. 动画只在元素可见时播放

const section = document.querySelector('.fade-in');

const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    section.classList.add('in-view');
  }
});

observer.observe(section);

配合 CSS：

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.5s ease-out;
}

.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}

3. 无限滚动加载更多数据

const sentinel = document.querySelector('#bottom-sentinel');
const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    loadNextPage();
  }
});

observer.observe(sentinel);

这是几乎所有瀑布流/短视频/资讯流页面的常规做法。

六、参数详解：IntersectionObserver 构造函数的神秘三参数

const observer = new IntersectionObserver(callback, options);

options 是一个对象，可以包含：

  • root: 观察相交的容器元素，默认是 null（视口）；
  • rootMargin: 设置容器的“边缘偏移量”，如 "0px 0px -100px 0px"，表示提前 100px 检测；
  • threshold: 相交比例阈值，可以是 0~1 的数字或数组，如 [0, 0.5, 1]，表示当相交比例达到这些值时都会触发回调。

实战建议：

  • 想要“进入一点就触发” → threshold: 0.01；
  • 想要“完全进入才触发” → threshold: 1；
  • 想要“提前触发” → rootMargin: "0px 0px 300px 0px"。

七、兼容性问题与 Polyfill（依然有些项目不能用）

截至 2025 年，IntersectionObserver 已广泛支持于 Chrome、Firefox、Edge、Safari（含移动端），但一些低版本 UC 浏览器、IE 无法支持。

你可以使用 Polyfill：

npm install intersection-observer

import 'intersection-observer';

加载后自动补齐 window.IntersectionObserver，无需额外配置。

八、小结：滚动事件不是原罪，但你有更好的选择

我们今天围绕“判断元素是否进入视口”这个看似基础但实际高频的问题，探索了 IntersectionObserver 的如下价值：

  • API 简洁清晰，性能优异，语义明确；
  • 对滚动监听/图片懒加载/动画触发/曝光监测都有广泛应用场景；
  • 真正意义上将“视口判断”这件事从手动转为声明式与自动化。

在这个一切都在强调性能与用户体验的时代，“scroll + getBoundingClientRect”早就不再是主流做法。IntersectionObserver 是你工具箱中必须上手的原生能力。

avatar
文章
阅读
粉丝