应使用 requestAnimationFrame 节流并在 scroll 回调中实时读取 window.scrollY，避免直接高频操作；首次读取需等待 DOMContentLoaded 或 load 事件，移动端需同时监听 touchmove 并设 passive: false，只读场景用 passive: true 提升性能。
直接监听 scroll 事件就能拿到滚动位置，但绝大多数人漏掉了防抖和触发时机这两个关键点。
为什么 scroll 事件里 window.pageYOffset 有时是 0？
常见于页面刚加载完立刻读取，或在某些移动端 WebView 中——scroll 事件还没触发，而你手动调用时 DOM 还没完成初始布局。更隐蔽的是：部分安卓浏览器（如旧版 UC）在页面未完全渲染前，pageYOffset 会返回 0，哪怕页面明明已滚动。
- 务必等
DOMContentLoaded或load后再首次读取，避免“假 0” - 不要依赖单次读取，而是把逻辑放在
scroll回调内实时获取 - 移动端建议同时监听
touchmove（需{ passive: false }）以防丢失首帧
addEventListener('scroll', ...) 该加 passive: true 吗？
该加，但得看用途。浏览器默认把 scroll 设为 passive: true 是为了提升滚动流畅性，可一旦你在回调里调用 event.preventDefault()（比如自定义下拉刷新），就必须显式设为 false，否则会报错：Unable to preventDefault inside passive event listener。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 只读场景（如吸顶、懒加载）→ 用
{ passive: true }，性能更好 - 需要拦截/控制滚动（如滚动锁、手势阻断）→ 必须
{ passive: false } - Chrome 控制台会警告 passive 不匹配，别忽略它
怎么稳定获取实时滚动位置，又不卡顿？
scroll 在快速滚动时每秒可能触发上百次，直接在里面跑 DOM 操作或计算，很容易掉帧。核心不是“怎么取值”，而是“什么时候取、取几次”。
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame节流：在下一帧执行位置读取，天然对齐屏幕刷新率 - 避免在回调里反复查
document.documentElement.scrollTop和window.pageYOffset，优先统一用window.scrollY（现代浏览器兼容性好，且语义清晰） - 如果只是做“滚动到某位置触发效果”，用
IntersectionObserver替代手动监听，更轻量、更准确
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
requestAnimationFrame(() => {
console.log(window.scrollY); // 稳定、不卡顿
ticking = false;
});
ticking = true;
}
});
真正难的不是监听，而是判断“用户到底有没有‘停’下来”——比如懒加载图片，不能等滚动彻底停止才加载，得在滚动间隙就响应；而吸顶导航又不能在滚动中频繁重绘。这些边界，得靠业务节奏反推节流策略，不是套个防抖就行。
