一行 overflow-x:hidden，把桌面 Chrome 的滚轮搞死了
一行 overflow-x:hidden，把桌面 Chrome 的滚轮搞死了先说结论：整页滚不动，不是 JS 拦的、也不是遮罩挡的，是我们自己为了「防横向溢出」顺手加的那一行 `html, body { overflow-x: hidden; }`。它的坏法很隐蔽 —— 手机上完全看不出来，只有桌面 Chrome 的鼠标滚轮会死。
现象
改版后页面能正常显示，手机上也滑得动。但在桌面 Chrome 上，鼠标滚轮往下滚，整页纹丝不动；可你要是去拖右侧那个滚动条，又滚得好好的。换个浏览器偶尔又正常（Firefox/Safari 有时候没事），就更让人摸不着头脑。
https://blog.7ehl.com/usr/uploads/2026/10/1418635358.png
（图：同一行 CSS，桌面滚轮失效、手机却正常 —— 这就是当初漏掉它的原因）
排查：先怀疑的都不对
第一反应是 JS 拦了 wheel 事件 —— 翻了一遍，没有。
第二反应是某个 fixed 的遮罩层盖在上面，把滚轮吃了 —— 也不是。
最后一段段注释掉 CSS，才把范围缩到一行：
html, body { overflow-x: hidden; }
这行是我们自己加的，初衷是「防止页面横向溢出、出现左右乱跑」。
根因：overflow 改掉了「滚动容器是谁」
在 `html` / `body` 上设 overflow，会改变浏览器认定的滚动容器到底是谁。Chrome 在桌面端对这种情况处理得很别扭，结果就是鼠标滚轮失效 —— 但滚动条还能用、拖拽也能滚。移动端因为滚动模型不一样，不受影响，所以手机上看一切正常，问题只在桌面暴露。
这就是它最坑的地方：现象「只死一半」，看着不像 CSS 的锅。
正解：别在 html/body 上做这件事
正确做法不是删掉了事，而是把 `overflow-x: hidden` 挪到**真正需要裁切的那个容器**上，而不是压在 html/body 上。
而且要**先查清是哪块内容真的超宽**，再去修那个元素：
· 临时加 `* { outline: 1px solid red; }`，一眼就能看出谁越界；
· 或者 DevTools 里看元素 `scrollWidth > clientWidth`，定位那个「撑宽了页面」的家伙。
通常最宽的罪魁就是一张图或者一个固定宽度的块，一个 `max-width: 100%`、图片加个 `height: auto`，就解决了 —— 根本不需要动全局的 overflow。
一句话记下
横向溢出没实测出真的超宽，就别顺手加 `overflow-x: hidden`。它会用一个你看不出来的方式，把整页的滚动弄坏。 补一个同类的坑：这种「滚轮死一半、拖滚动条又正常」的现象，除了在 html/body 上写 overflow，还有一种成因是外层给了固定高度、内层又写了 overflow:auto，滚轮被内层这个「滚动容器」吃掉了——指针刚好停在内层上时才复现，换个位置又没事，特别迷惑。
排查手法可以共用：DevTools 里选中元素看 scrollHeight > clientHeight，谁超宽/超高谁就是元凶。跟你的结论一致——真没必要动全局 overflow。
页:
[1]