一行 overflow-x:hidden，把桌面 Chrome 的滚轮搞死了

member

一行 overflow-x:hidden，把桌面 Chrome 的滚轮搞死了

先说结论：整页滚不动，不是 JS 拦的、也不是遮罩挡的，是我们自己为了「防横向溢出」顺手加的那一行 `html, body { overflow-x: hidden; }`。它的坏法很隐蔽 —— 手机上完全看不出来，只有桌面 Chrome 的鼠标滚轮会死。

现象

改版后页面能正常显示，手机上也滑得动。但在桌面 Chrome 上，鼠标滚轮往下滚，整页纹丝不动；可你要是去拖右侧那个滚动条，又滚得好好的。换个浏览器偶尔又正常（Firefox/Safari 有时候没事），就更让人摸不着头脑。


（图：同一行 CSS，桌面滚轮失效、手机却正常 —— 这就是当初漏掉它的原因）

排查：先怀疑的都不对

第一反应是 JS 拦了 wheel 事件 —— 翻了一遍，没有。
第二反应是某个 fixed 的遮罩层盖在上面，把滚轮吃了 —— 也不是。
最后一段段注释掉 CSS，才把范围缩到一行：

1. 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`。它会用一个你看不出来的方式，把整页的滚动弄坏。