JavaScript 监听页面滚动入门教程（完整版）

很多JavaScript教程把监听页面滚动一笔带过，导致不少学习者一知半解。这篇文章做一个补充，把容易模糊的地方讲具体。

监听页面滚动方案横向对比

1. 监听页面滚动涉及资源操作时，记得释放：文件要关、连接要断、内存要还。
2. 团队里推广监听页面滚动的正确用法，比一个人用得好更有价值。
3. 写监听页面滚动相关代码时，变量命名要能自解释，别用 a、b、c 这类名字。

接下来进入大家最关心的环节：写代码。

监听页面滚动代码示例

举个例子，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));

选择建议

1. 遇到诡异问题试试最小化复现：把无关代码都删掉，问题往往立刻现形。
2. 重要功能上线前，先写好回滚方案，再点开始按钮。
3. 遇到问题先看日志，日志看不懂再把关键报错贴到搜索引擎，命中率很高。
4. 正则表达式写完要多测几个边界用例，贪心和转义最容易出错。

一点总结

以上就是今天的全部内容。监听页面滚动不难，难的是坚持学习这件事本身。继续加油。

遇见问题加 QQ23979811 协助处理