上一篇
JS滚动效果怎么做？js实现页面平滑滚动代码
滚动效果是前端开发中提升用户体验的关键交互手段，它不仅能引导用户视线，还能通过视差滚动、无限加载等机制增加页面的趣味性和功能性，在 JavaScript 中实现滚动效果，核心在于监听滚动事件、计算元素位置以及优化性能。
核心原理与事件监听
实现滚动效果的基础是监听浏览器的滚动行为，JavaScript 提供了 window.addEventListener('scroll', ...) 方法来捕获滚动事件，原生滚动事件触发频率极高，如果直接在回调中执行复杂的 DOM 操作或样式计算，极易导致页面卡顿,理解事件触发机制是优化性能的第一步。
| 事件类型 | 触发频率 | 适用场景 | 注意事项 |
|---|---|---|---|
| scroll | 极高（每像素或每帧） | 实时位置计算、无限加载 | 必须配合节流或防抖使用，否则性能损耗巨大 |
| resize | 窗口尺寸变化时 | 响应式布局调整 | 同样需要节流处理 |
| IntersectionObserver | 元素进入/离开视口时 | 懒加载、入场动画 | 异步 API，性能极佳，无需手动计算位置 |
性能优化策略
由于 scroll 事件的高频触发，直接在其中执行代码会导致主线程阻塞，引发掉帧现象，常见的优化手段包括节流（Throttle）和防抖（Debounce）。
节流（Throttle） 确保函数在指定时间间隔内只执行一次，每 100 毫秒执行一次滚动逻辑，这样既能保证响应的及时性，又能大幅减少 CPU 负载。
防抖（Debounce） 则是等待用户停止滚动一段时间后才执行函数,适用于搜索框输入或页面加载完成后的最终状态计算。
现代浏览器提供了 requestAnimationFrame API，它允许开发者在浏览器下次重绘之前执行回调函数，将滚动逻辑绑定到 requestAnimationFrame 上，可以确保动画与屏幕刷新率同步,从而获得最流畅的视觉效果。
现代 API：IntersectionObserver
对于许多常见的滚动效果，如元素进入视口时触发动画或懒加载图片，推荐使用 IntersectionObserver，这是一个异步观察接口，它不会在每次滚动时立即触发回调,而是在目标元素与视口或根元素相交时触发。
这种方法的优势在于它由浏览器原生优化，不会阻塞主线程,且代码简洁易读。
视差滚动效果实现
视差滚动（Parallax Scrolling）通过让背景层和前景层以不同速度移动，营造出深度感，实现这一效果通常有两种方式：CSS 和 JavaScript。
使用 CSS 的 background-attachment: fixed 可以实现简单的视差，但兼容性较差且移动端性能不佳，JavaScript 方案则更加灵活，可以通过监听滚动事件，动态修改元素的 transform: translateY() 属性。
window.addEventListener('scroll', () => { const scrolled = window.pageYOffset; const parallaxElement = document.querySelector('.parallax-bg'); // 背景层移动速度为滚动速度的一半，产生视差 parallaxElement.style.transform = `translateY(${scrolled 0.5}px)`; });
为了优化性能，上述代码应包裹在节流函数中，或者结合 requestAnimationFrame 使用。
无限滚动加载
无限滚动（Infinite Scroll）是社交媒体和内容密集型网站常用的功能，它允许用户无限向下滚动加载新内容，而无需分页,实现逻辑通常包括：
- 监听滚动到底部的事件。
- 判断是否接近页面底部（距离底部 100px）。
- 触发 AJAX 请求获取新数据。
- 将新数据追加到 DOM 中。
需要注意的是，在加载过程中应禁用重复请求，通常通过一个 isLoading 标志位来控制。
let isLoading = false; window.addEventListener('scroll', () => { if (isLoading) return; const { scrollTop, scrollHeight, clientHeight } = document.documentElement; // 当滚动位置接近底部时触发加载 if (scrollTop + clientHeight >= scrollHeight 100) { isLoading = true; loadMoreContent().then(() => { isLoading = false; }); } });
相关问题与解答
问题 1：为什么在移动端使用 scroll 事件监听器会导致严重的性能问题？
解答： 在移动端，浏览器通常采用独立的合成线程来处理滚动，而 JavaScript 运行在主线程上，如果直接在 scroll 事件中读取或修改 DOM 属性（如 offsetTop、style），会强制浏览器进行重排（Reflow）和重绘（Repaint），这会阻塞合成线程，导致滚动掉帧和卡顿，移动设备的滚动惯性更大，事件触发频率可能更高，解决方案是使用 IntersectionObserver 替代手动位置计算，或者确保在 scroll 回调中只进行轻量级的数据记录，并将实际的 DOM 操作推迟到 requestAnimationFrame 中执行。
问题 2：如何实现平滑滚动到页面指定锚点，而不是瞬间跳转？
解答： 现代浏览器原生支持 CSS 属性 scroll-behavior: smooth;，只需在 html 或 body 样式中设置该属性，所有锚点链接点击后都会自动平滑滚动，如果需要通过 JavaScript 精确控制滚动行为（例如添加自定义缓动函数或回调），可以使用 window.scrollTo({ top: element.offsetTop, behavior: 'smooth' })，这种方法兼容性良好（支持 IE 以外的所有现代浏览器），且比手动在 requestAnimationFrame 中计算位置更加简洁和高效。
