你有没有这种体验：在手机上浏览某个网站，手指左右一划——

整个页面跟着跑了，阅读体验瞬间破碎。

但少数派（sspai.com）的文章页却不会。无论你怎么左右滑动，页面都稳如泰山。这篇文章就拆解这个设计背后最简单、也最有效的一行代码。

一、问题：页面为什么会左右滑动？

在移动端浏览器上，当你手指水平滑动时，浏览器默认会产生水平滚动。这本身不是 bug，但如果页面内容刚好在视口宽度上有一点点溢出——哪怕只是 1 个像素——浏览器就会显示水平滚动条，并且响应你的左右滑动操作。

溢出的常见原因：

  • 某个图片、代码块或表格宽度超过了屏幕
  • padding 或 margin 让容器撑出了父级
  • position: absolute 的元素超出了边界
  • 某个第三方组件（如评论区、广告）宽度爆了

这些溢出不一定肉眼可见，但足以让移动端的滑动体验变差。

二、少数派的做法：三层防护

我打开少数派的文章页，用浏览器工具检查了它们的 CSS。核心机制非常简洁：

第 1 层：html 拦截

html { overflow-x: hidden; }

这是最关键的。<html> 元素是整个页面的滚动容器。一旦它的 overflow-x 设为 hidden，任何超出视口宽度的内容根本不会产生水平滚动条，浏览器也就不会响应左右滑动。

第 2 层：body 双保险

body { overflow-x: hidden; }

某些浏览器（尤其是移动端 Safari）对 <html> 的 overflow 处理方式存在差异，加在 <body> 上做双重锁定，确保万无一失。

第 3 层：内容宽度严格约束

少数派的核心容器 #app 的宽度严格等于视口宽度，所有子元素（图片、代码块、表格）都通过 CSS 限制了最大宽度：

img, pre, table { max-width: 100%; }

确保没有任何元素撑出容器。

三、为什么 !important 有时是必要的？

在实际落地时，我发现一个坑：某些第三方 CSS 或样式重置会覆盖 html { overflow-x: hidden }。

例如我自己的博客，Jekyll 的 Minima 主题在构建时生成了一个空的 assets/main.css，但浏览器在解析 HTML 时，某些样式优先级导致了 overflow-x 被重置为 visible。

解决方案很简单——加 !important：

html, body { overflow-x: hidden !important; }

少数派没有用 !important，因为它们没有样式冲突。但在实际项目中，如果发现加了没效果，!important 是最直接的兜底手段。

四、需要注意什么？

虽然一行 CSS 就能解决问题，但有几个前提必须注意：

1. 确认没有内容被截断

overflow-x: hidden 会直接裁掉任何溢出的内容。如果你的页面有重要的绝对定位元素（如下拉菜单、tooltip、弹窗）超出了视口，它们会被切掉。

2. 不影响内部滚动容器

overflow-x: hidden 只作用于声明它的元素本身，不会影响其子元素内部的滚动。比如我博客首页的角色卡片滑动条，就是用 overflow-x: auto 在子容器中实现的，不受影响：

.character-track {
  overflow-x: auto;  /* 内部可以水平滚动 */
  scroll-snap-type: x mandatory;
}

3. 移动端和桌面端都有效

这行 CSS 在桌面端也会生效——如果你的页面内容超宽，桌面用户也不会看到水平滚动条。这在大多数情况下是符合预期的，但如果你的页面设计上需要有水平滚动（比如横向图库），就要考虑更精细的控制了。

五、完整实现

在你的博客或项目中，最简单的方式就是在全局 <head> 中加入：

<style>
  html, body {
    overflow-x: hidden !important;
  }
</style>

如果你想保持优雅（不依赖 !important），确保这行 CSS 在所有其他样式之后加载，或者将它的选择器优先级提高：

html { overflow-x: hidden; }         /* 在最低处加载 */
/* 或 */
:root { overflow-x: hidden; }        /* :root 优先级更高 */

六、总结

方法 难度 稳度
html { overflow-x: hidden } ⭐ ⭐⭐⭐
html, body { overflow-x: hidden } ⭐ ⭐⭐⭐⭐
+ !important ⭐ ⭐⭐⭐⭐⭐

少数派用了一个简单到令人惊叹的方案——一行 CSS 解决了一个常见的移动端体验问题。

没有复杂的 JavaScript 拦截，没有 touch 事件 preventDefault，没有 debounce 监听。就是一行：

html { overflow-x: hidden; }

有时候，最好的解决方案就是最简单的那个。

• ... 次阅读