JavaScript滚动效果通过监听scroll事件并读取window.scrollY实现，常见于吸顶、视差等场景；性能优化需采用节流、passive: true、缓存布局属性、requestAnimationFrame及Intersection Observer。
滚动效果的常见实现方式
JavaScript 中实现滚动效果，核心是监听 scroll 事件，再根据 window.scrollY（或 document.documentElement.scrollTop）获取当前滚动位置，进而触发样式变化、动画、懒加载等逻辑。例如固定导航栏、视差滚动、吸顶效果、滚动进度条等，都基于此。
scroll 事件性能问题的根源
滚动时浏览器会高频触发 scroll 事件（每秒可达 60+ 次），若事件回调中执行重排（layout）、重绘（paint）或复杂计算（如频繁读取 offsetTop、getBoundingClientRect()），极易造成卡顿、掉帧。
关键优化策略
1. 节流（throttle）或防抖（debounce）
限制回调执行频率，避免过度响应。节流更适合滚动监听（保证一定节奏），防抖适合“滚动结束才执行”的场景（如 resize 后重新计算布局）。
2. 使用 passive: true
在添加事件监听器时启用被动模式，告诉浏览器该回调不会调用 preventDefault()，可让浏览器更早地进行默认滚动，提升流畅度：
3. 避免在 scroll 回调中读写布局属性
比如不要在每次 scroll 中反复调用 element.offsetTop、getBoundingClientRect() 或修改 style.left 等触发重排的属性。优化方法包括：
- 将布局读取（如元素位置）缓存到变量中，仅在必要时更新（如 resize 后）
- 用
transform: translateY()替代直接改top或margin-top，利用 GPU 加速且不触发重排 - 使用
requestAnimationFrame批量处理视觉更新，让回调与屏幕刷新同步
4. 优先使用 Intersection Observer
对“元素进入/离开视口”类需求（如懒加载图片、触发动画），应弃用 scroll + getBoundingClientRect 的轮询方式，改用 IntersectionObserver。它由浏览器原生优化，几乎无性能损耗，且支持根容器、阈值、惰性初始化等特性。
一个轻量级 scroll 节流示例
结合 requestAnimationFrame 与节流思想，兼顾响应性与性能：
let ticking = false;function updateOnScroll() {
if (!ticking) {
requestAnimationFrame(() => {
// 实际更新逻辑，如更新吸顶状态、计算进度条
handleScroll();
ticking = false;
});
ticking = true;
}
}
window.addEventListener('scroll', updateOnScroll, { passive: true });
不复杂但容易忽略
