为何为html标签设置overflow-x:hidden后，body的overflow属性失效？

问题现象 #

当给html元素设置overflow-x: hidden后，即便body已经设置overflow: hidden，页面依然会因为内部高高度元素出现垂直滚动条，body的溢出隐藏规则完全失效；但只要移除html的overflow属性，body的overflow: hidden就能正常生效，隐藏所有溢出内容。

背后的原理 #

这是浏览器视口滚动机制的特殊逻辑导致的：

• 默认情况下，浏览器会把body元素的overflow属性代理给视口（即html元素对应的视口容器），此时body的overflow:hidden会直接作用于整个页面视口，隐藏所有溢出内容。
• 一旦你给html元素显式设置了任何overflow属性（哪怕只是overflow-x: hidden），就会打破这种代理关系——html元素会变成一个独立的滚动容器，而body则退化为普通的块级元素。此时：
  • html的overflow-y默认是auto，所以垂直方向溢出时会显示滚动条；
  • body的overflow: hidden只对body自身的内容生效，但body高度默认是auto，会被内部元素完全撑开，根本不会触发自身的溢出隐藏逻辑。

解决办法 #

根据需求选择对应的方案：

1. 若需要同时隐藏水平和垂直方向的溢出，直接给html设置overflow: hidden，替代单独的overflow-x: hidden：

html {
  overflow: hidden;
}
body {
  overflow: hidden;
}

2. 若仅需隐藏水平溢出，同时让body的垂直溢出隐藏生效，需要给html补充设置overflow-y: hidden：

html {
  overflow-x: hidden;
  overflow-y: hidden;
}
body {
  overflow: hidden;
}

复现代码 #

CSS

html{
overflow-x: hidden;
}

body{
overflow: hidden;
}

.fill{
height: 8000px;
border: 1px solid blue;
}

HTML

<html>
<body>
<div class="fill"></div>
</body>
</html>

内容的提问来源于stack exchange，提问作者Álvaro Franz