JavaScript 监听页面滚动入门教程

为什么要掌握监听页面滚动？

本文的主题是监听页面滚动。如果你是JavaScript新手，这篇文章能帮你快速建立整体认识；如果你有经验，也可以当作一次查漏补缺。

关于监听页面滚动的关键知识

1. 注意监听页面滚动在边界条件下的表现，例如空数据、超长数据等特殊情况。
2. 监听页面滚动的错误处理要区分可恢复和不可恢复，分别采取不同策略。
3. 监听页面滚动的使用要适度，过度设计比不用更糟糕。

纸上得来终觉浅，下面亲手试一试监听页面滚动。

眼见为实：监听页面滚动示例

来看一个具体的例子——IntersectionObserver 图片懒加载：

const io = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.src = e.target.dataset.src;
      io.unobserve(e.target);
    }
  });
});
document.querySelectorAll('img[data-src]').forEach(img => io.observe(img));

避坑指南

• 写完代码自己先过一遍，很多低级错误在自审时就能发现。
• 大文件操作要流式处理，一次性读入内存迟早出问题。
• 缓存是个双刃剑，改了代码不生效时，先想想是不是有缓存没清。

最后说两句

希望读完本文后，监听页面滚动对你来说不再是一个模糊的概念。下次在代码里遇到它，你应该能会心一笑了。

---

遇见问题加 QQ23979811 协助处理