HTML滚动监听与懒加载实现技巧

本文深入剖析了网页滚动交互中的性能陷阱与现代优化方案，指出scroll事件本身并不卡顿，真正导致页面卡死的是回调中不当的DOM查询、样式修改和网络请求等重操作；推荐优先使用CSS sticky实现吸顶以规避JS开销，用IntersectionObserver替代scroll实现精准、稳定、无需手动计算的懒加载与无限滚动，并强调若必须使用scroll，则务必配合passive选项和requestAnimationFrame节流——核心思想是“让浏览器做它擅长的事，JS只在恰当时机做最轻的事”，从而在保证功能的同时实现丝滑流畅的用户体验。

scroll 事件监听本身不卡，但回调写错就卡死

直接在 window.addEventListener('scroll', handler) 里查 DOM、改样式、发请求，几乎必卡。滚动过程中每像素都可能触发，桌面端一秒上百次，移动端 WebView 还会主动节流甚至丢帧。

关键不是“要不要监听”，而是“回调里只做最轻的事”：

• 不要在回调里调用 document.querySelector、getBoundingClientRect() 等重计算方法
• 避免直接设置 element.style.position = 'fixed' —— 这会强制同步布局（layout）
• 把位置判断、DOM 更新、请求发起全部移出 scroll 回调，交给 requestAnimationFrame 或防抖函数调度

吸顶效果优先用 CSS position: sticky，不是 JS

90% 的吸顶场景，position: sticky 就够了，不用 JS 监听 scroll。它原生支持、零性能开销、兼容性已覆盖 Chrome 56+ / Firefox 59+ / Safari 15.4+ / Edge 79+。

写法很简单：

.sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 100;
}

注意两个坑：

• 父容器不能有 overflow: hidden 或 transform，否则 sticky 失效
• 必须显式设置 top（或 bottom），只设 position: sticky 不生效
• 如果要兼容老浏览器（如 IE），才退回到 scroll + scrollTop 判断逻辑

懒加载和无限滚动，IntersectionObserver 比 scroll 更稳

用 scroll 做懒加载或滚动加载，容易因图片异步加载、广告插入、动态 height 变化导致 scrollTop + innerHeight >= scrollHeight 判断失准，提前或漏触发。

现代方案直接用 IntersectionObserver：

• 监听一个占位
  是否进入视口
• 用 { rootMargin: '0px 0px 200px 0px' } 提前 200px 触发，用户无感知
• 回调里检查 entries[0].isIntersecting 为 true 再加载，天然防抖
• 无需手动清理，也不依赖滚动位置计算，DOM 高度变化不影响判断

示例：

const observer = new IntersectionObserver(
  (entries) => {
    if (entries[0].isIntersecting && !isLoading) {
      loadMore();
      observer.unobserve(document.getElementById('sentinel'));
    }
  },
  { rootMargin: '0px 0px 200px 0px' }
);
observer.observe(document.getElementById('sentinel'));

真要用 scroll，必须加 passive 和节流

如果因兼容性或特殊逻辑非用 scroll 不可，至少做到两点：

• 绑定时加 { passive: true }：告诉浏览器“这个回调不会调 preventDefault()”，让浏览器跳过事件可取消性检查，滚动更顺滑
• 用 requestAnimationFrame 节流，而不是 setTimeout 防抖：RAF 保证逻辑在下一帧执行，且同一帧只执行一次，比时间戳节流更贴合渲染周期

示例：

let ticking = false;
function updateSticky() {
  const scrollTop = window.scrollY;
  const target = document.getElementById('header');
  if (scrollTop > target.offsetTop) {
    target.classList.add('fixed');
  } else {
    target.classList.remove('fixed');
  }
  ticking = false;
}

window.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(updateSticky);
    ticking = true;
  }
}, { passive: true });

真正难的不是监听滚动，而是判断“什么时候该做什么”。滚动位置是瞬时值，而吸顶、懒加载、加载更多这些行为都有明确的临界点——靠计算不如靠观察，靠 JS 轮询不如靠浏览器原生 API 告知。

好了，本文到此结束，带大家了解了《HTML滚动监听与懒加载实现技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！