scroll事件高频触发易致卡顿，应使用requestanimationframe节流；监听容器需确保overflow生效且内容溢出；懒加载等场景优先用intersectionobserver替代。
原生 window 或元素上的 scroll 事件能直接监听滚动，但不建议在 scroll 回调里直接写重逻辑——它会高频触发（每像素都可能触发），极易导致卡顿或丢帧。
为什么 scroll 事件容易卡页面
浏览器在滚动过程中会尽可能频繁地派发 scroll 事件，尤其在桌面端鼠标滚轮或触控板惯性滚动时，1 秒内可能触发上百次。若回调中执行 DOM 查询、样式计算、console.log 甚至简单赋值，都可能让主线程忙不过来。
-
scroll不是“滚动结束才触发”，而是“正在滚动就持续触发” - 移动端 WebView（如 iOS Safari）对
scroll的节流更激进，有时连requestAnimationFrame都无法覆盖其限制 - 用
addEventListener('scroll', handler)绑定后，不手动removeEventListener就会一直驻留内存
用 requestAnimationFrame 节流是最实用的方案
核心思路：把真正要做的逻辑（比如吸顶、懒加载判断）推迟到下一帧执行，并且确保同一帧只执行一次。比 setTimeout 或 throttle 更精准匹配渲染节奏。
let isScrolling = false;
function handleScroll() {
if (!isScrolling) {
isScrolling = true;
requestAnimationFrame(() => {
// ✅ 这里放你的业务逻辑，例如：
const scrollTop = window.pageYOffset;
if (scrollTop > 100) {
document.body.classList.add('scrolled');
} else {
document.body.classList.remove('scrolled');
}
isScrolling = false;
});
}
}
window.addEventListener('scroll', handleScroll);
监听特定容器而非 window 时要注意什么
当滚动目标是某个 <div class="scroll-container"> 而非整个页面时，必须确认该元素满足两个前提：<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1954" title="Anyword"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/68b6d1e234f14574.png" alt="Anyword" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1954" title="Anyword">Anyword</a>
<p>AI文案写作助手和文本生成器，具有可预测结果的文案 AI</p>
</div>
<a href="/ai/1954" title="Anyword" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>它有明确的 <code>height 和 overflow-y: auto（或 scroll）
container.addEventListener('scroll', handler)，不是 window
container.scrollTop，不是 window.pageYOffset
常见错误：给一个没有溢出的容器绑 scroll，结果事件永远不触发——先用 DevTools 检查 computed overflow 和 scrollHeight > clientHeight。
现代替代方案：IntersectionObserver 适合懒加载类场景
如果你实际想解决的是“某元素进入视口时执行操作”，别硬扛 scroll。用 IntersectionObserver 更轻量、更可靠，且自动处理节流和跨 iframe 场景。
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('✅ 元素已进入视口：', entry.target);
// 触发图片加载、动画启动等
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
document.querySelectorAll('.lazy-item').forEach(el => observer.observe(el));
注意：IE 完全不支持 IntersectionObserver，需按需加 polyfill；但它在 Chrome/Firefox/Safari/Edge 90+ 中行为一致，比手写节流更省心。
滚动监听本身很简单，难的是判断「到底要不要监听」以及「监听后该做什么」。很多卡顿问题其实源于本可以用 IntersectionObserver 却硬写 scroll，或者没意识到容器的 overflow 设置是否生效。
