应使用 requestanimationframe 节流并在 scroll 回调中实时读取 window.scrolly，避免直接高频操作；首次读取需等待 domcontentloaded 或 load 事件，移动端需同时监听 touchmove 并设 passive: false。
直接监听 scroll 事件就能拿到滚动位置，但绝大多数人漏掉了防抖和触发时机这两个关键点——不处理，轻则卡顿，重则读到 0 假值。
为什么 window.scrollY 有时是 0？
常见于页面刚加载完立刻读取，或在某些移动端 WebView 中——scroll 事件还没触发，而你手动调用时 DOM 还没完成初始布局。更隐蔽的是：部分安卓浏览器（如旧版 UC）在页面未完全渲染前，pageYOffset 会返回 0，哪怕页面明明已滚动。
- 务必等
DOMContentLoaded或load后再首次读取，避免“假 0” - 不要依赖单次读取，而是把逻辑放在
scroll回调内实时获取 - 移动端建议同时监听
touchmove（需{ passive: false }）以防丢失首帧
怎么稳定获取实时滚动位置又不卡顿？
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;
}
});
监听特定容器（如 div）滚动时要注意什么？
当滚动目标是某个 <div class="scroll-container"> 而非整个页面时，必须确认该元素满足两个前提：
<ul>
<li>它有明确的 <code>height 和 overflow-y: auto（或 scroll）
container.addEventListener('scroll', handler)，不是 window
container.scrollTop，不是 window.pageYOffset
scroll，结果事件永远不触发——先用 DevTools 检查 computed overflow 和 scrollHeight > clientHeight
真正难的不是监听，而是判断“用户到底有没有‘停’下来”——比如懒加载图片，不能等滚动彻底停止才加载，得在滚动间隙就响应；而吸顶导航又不能在滚动中频繁重绘。这些边界行为，靠单纯节流解决不了，得结合业务节奏做分层响应。
