scrollTop 不能直接读取 document 对象的值，必须作用于具有滚动容器特性的元素（如 body、html 或自定义 overflow: scroll/auto 的元素），否则返回 undefined。
`scrolltop` 不能直接读取 `document` 对象的值，必须作用于具有滚动容器特性的元素（如 `body`、`html` 或自定义 `overflow: scroll/auto` 的元素），否则返回 `undefined`。
在 Web 开发中，scrollTop 是一个常用于检测用户滚动行为的关键属性，但它并非 document 对象的原生属性。你遇到的问题——document.scrollTop > 20 始终不触发——根本原因在于：document 元素本身不可滚动，也没有 scrollTop 属性；浏览器实际的滚动容器通常是 <html>（在大多数现代浏览器中）或 <body>（部分旧场景下），因此需明确目标元素。
✅ 正确做法是：从 document.documentElement（即 <html> 根元素）或 document.body 中读取 scrollTop，并优先使用 document.documentElement.scrollTop，因其在标准模式下更可靠：
document.addEventListener('scroll', function() {
// 推荐：兼容性好，标准模式下准确反映视口滚动距离
const scrollY = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollY > 20) {
document.querySelector('header').classList.add('scrolled');
} else {
document.querySelector('header').classList.remove('scrolled');
}
});⚠️ 注意事项：
- 不要写 document.scrollTop —— 它始终为 undefined；
- 避免仅依赖 document.body.scrollTop，在怪异模式（Quirks Mode）下可能生效，但现代页面应使用标准模式；
- 为防止频繁触发影响性能，建议对滚动事件进行节流（throttle）或使用 requestAnimationFrame 优化；
- 若需监听某个局部容器（如弹窗内滚动区），则应绑定事件到该容器元素，并使用其自身的 .scrollTop（如示例中的 outer.scrollTop）。
? 小技巧：可通过 console.log({ html: document.documentElement.scrollTop, body: document.body.scrollTop }) 快速验证当前滚动源。
掌握这一细节，你就能稳定实现“滚动阈值触发 Header 样式切换”等常见交互效果。
