onscroll内联属性无法实现防抖或节流——因其每次触发都会重置闭包状态、丢失timer/lastRun等变量，且不支持passive配置；必须使用addEventListener配合debounce/throttle/rAF才能保障上下文与性能优化效果。
onscroll 属性本身无法做防抖或节流优化——它根本做不到。不是写法不对，是机制上就失效。
为什么 onscroll 内联属性不能用防抖/节流
内联写法如 <div onscroll="handleScroll()"> 或 window.onscroll = debounce(fn, 100)，每次触发都重新解析字符串或赋值，闭包状态（比如 timer、lastRun、ticking）全丢失。
-
debounce依赖的timer变量每次都被重置为null，等于没清定时器 -
throttle依赖的lastRun时间戳或valid开关，在函数执行完就销毁，下次进来还是初始值 - 事件参数
event拿不到，this指向也错（通常是window，不是目标元素） - 移动端 iOS Safari 旧版本对
{ passive: true }支持不全，而内联写法连这个配置都加不了
addEventListener 是唯一可靠入口
所有防抖、节流、requestAnimationFrame 优化，必须走 addEventListener，才能维持闭包环境和正确上下文。
- 防抖适用于“停顿后才响应”的场景，比如滚动到底部触发加载，但用户狂滚时不该发请求：
debounce(handleLoadMore, 300) - 节流适用于“需要定期采样”的场景，比如滚动中实时更新吸顶导航位置，但每帧跑一次就够了：
throttle(updateSticky, 100) - 更推荐
requestAnimationFrame替代节流：它天然对齐刷新节奏，后台标签页自动暂停，不掉帧
正确写法示例：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
let ticking = false;
function handleScroll() {
if (!ticking) {
requestAnimationFrame(() => {
updatePosition(); // 实际逻辑
ticking = false;
});
ticking = true;
}
}
window.addEventListener('scroll', handleScroll, { passive: true });
passive 选项必须配 addEventListener
{ passive: true } 告诉浏览器：“我不会在 scroll 里调 preventDefault()”，从而跳过等待 JS 执行的检查，滚动立刻响应。但它只在 addEventListener 中生效，onscroll= 语法根本不支持传配置对象。
- 不加
passive：iOS Safari 和 Chrome 滚动卡顿明显，尤其页面复杂时 - 加了但用了内联写法：语法报错或静默忽略，毫无作用
- 搭配
requestAnimationFrame使用时，passive: true是刚需，否则 rAF 也救不回卡顿
真正要优化滚动性能，别在 onscroll 上打转——删掉所有内联写法，统一收口到 addEventListener，再选防抖、节流或 requestAnimationFrame。最容易被忽略的点是：闭包变量生命周期和 passive 的绑定关系，缺一不可。
