如何用 scroll 与 resize 监听页面滚动与视口大小调整

应使用节流或防抖优化 scroll/resize 事件推荐 requestAnimationFrame 节流滚动、ResizeObserver 监听尺寸变化、IntersectionObserver 处理视口进入逻辑并注意移除监听器与避免强制同步布局。页面滚动和视口大小变化是前端开发中高频触发的交互场景用好 scroll 和 resize 事件能提升性能与体验但直接监听容易引发性能问题。关键在于节流throttle或防抖debounce并合理使用现代 API 替代方案。scroll 事件监听滚动位置变化滚动事件频繁触发每像素都可能触发不加控制会导致卡顿。推荐使用 requestAnimationFrame 节流或 lodash.throttle 等工具。基础监听写法不推荐直接使用window.addEventListener(scroll, () { console.log(window.scrollY); }); 推荐节流方案原生实现声明一个标志位确保每次滚动帧只执行一次逻辑 let ticking false;brwindow.addEventListener(scroll, () {br if (!ticking) {br requestAnimationFrame(() {br console.log(window.scrollY);br ticking false;br });br ticking true;br }br}); 若需精确监听某个元素滚动如容器内滚动绑定到该元素而非 window例如document.querySelector(.list-container).addEventListener(scroll, handler);resize 事件监听视口尺寸变化视口缩放、浏览器窗口拖拽、横竖屏切换都会触发 resize。它同样高频且在移动端还可能因软键盘弹出/收起而意外触发。 蝉妈妈AI 电商人专属的AI营销助手