window.addEventListener('scroll')在无滚动条时完全失效，是因为scroll事件仅在元素真实发生滚动（scrollTop/scrollLeft变化）时触发；当overflow:hidden或内容未溢出导致浏览器不生成滚动机制时，该事件根本不会派发。
为什么 window.addEventListener('scroll') 在无滚动条时完全失效
因为 scroll 事件只在元素真实发生滚动（即 scrollTop 或 scrollLeft 值变化）时触发。当容器设为 overflow: hidden 或内容未溢出导致浏览器不生成滚动机制时，scroll 事件根本不会派发——哪怕用户疯狂滚轮，window 或 document 也收不到任何信号。
常见误判是以为“滚轮 = 滚动”，其实底层是两个独立事件：wheel 是输入设备原始动作，scroll 是布局引擎响应结果。前者永远可用，后者依赖 CSS 溢出计算。
-
overflow: hidden的容器 + 内容未超高度 → 无scroll事件，但wheel仍触发 - 全屏堆叠
position: absolute页面 →body高度恒为视口高 →scroll永远不触发 - 动态插入 DOM 后忘记重算父容器高度 → 视觉上“该有滚动条”，但布局引擎判定“无溢出” →
scroll沉默
监听 wheel 事件并判断方向的可靠写法
wheel 事件在所有现代浏览器中统一支持，且 event.deltaY 是跨平台稳定字段：向下滚动为正数，向上为负数。不需要兼容旧版 mousewheel 或 DOMMouseScroll。
关键点不是“能不能监听”，而是“在哪监听”和“如何防抖”：
立即学习“前端免费学习笔记（深入）”；
- 监听目标选
document或具体容器（如document.querySelector('.page-container')），避免被子元素stopPropagation()中断 - 用
Math.abs(event.deltaY) > 20设阈值，过滤微小抖动（触控板轻滑常产生 ±1~5 的噪声） - 必须调用
event.preventDefault()，否则浏览器会尝试执行默认垂直滚动（即使没滚动条，也可能触发页面跳动或焦点偏移） - 不要直接用
deltaY累加位移，应结合当前页码做离散切换（如从 page1 → page2），避免连续滚轮导致跳页
示例片段：
document.addEventListener('wheel', (e) => {
if (Math.abs(e.deltaY) < 20) return;
e.preventDefault();
if (e.deltaY > 0) {
goToNextPage(); // 你自己的翻页逻辑
} else {
goToPrevPage();
}
});
隐藏滚动条但保留滚动能力的 CSS 组合
仅靠 overflow: hidden 会彻底禁用滚轮响应（因为浏览器认为“不可滚动”）。正确做法是让容器“可滚动但不显示滚动条”：
- WebKit（Chrome/Safari/Edge）：必须同时设置三个伪元素，
::-webkit-scrollbar单独设width: 0在 macOS 或新版 Chrome 中可能失效 - Firefox：只认
scrollbar-width: none，且必须作用于有overflow: auto或scroll的非根元素（html或body上无效） - 移动端 Safari：
scrollbar-width完全不支持，唯一可靠方式是包裹一层<div class="scroll-wrapper"> 并对其设样式<p>推荐最小可行配置：</p><pre class='brush:php;toolbar:false;'>.scroll-wrapper { overflow-y: auto; /* 隐藏滚动条 */ scrollbar-width: none; /* Firefox */ } .scroll-wrapper::-webkit-scrollbar { display: none; /* Chrome/Safari/Edge */ } </pre><p>注意：若容器有 <code>transform、will-change或filter，可能创建新层叠上下文导致滚动条渲染异常，此时加overflow: scroll强制重绘更稳。触屏设备无法滑动的典型原因与修复
鼠标滚轮能用但触屏不能滑，90% 是
touch-action被错误禁用。这个属性优先级高于所有 JS 事件监听，一旦设为none，手指滑动直接被系统拦截，连wheel或touchstart都收不到。- 检查是否全局写了
* { touch-action: none; }或在 body/container 上硬编码了该值 - 若需支持垂直滑动，显式设为
touch-action: pan-y；若还需 pinch-zoom，用manipulation - 避免在
position: fixed元素上设touch-action: none，它会污染子元素手势行为 - 滚动容器若含内联
iframe，其sandbox属性可能禁用指针事件，需加allow-pointer-events
最后提醒：
wheel事件在触屏设备上**不会触发**（iOS/Android 的滑动不模拟滚轮），所以触屏必须依赖touchstart/touchmove+ 速度计算，或直接用scroll事件（前提是滚动条可见或已启用平滑滚动）。 - 检查是否全局写了
