为何需在html上设置overflow:hidden以将滚动容器移至body？

这个问题其实涉及到浏览器默认的滚动机制和自定义滚动容器的实现逻辑，我来一步步给你拆解清楚：

1. 先搞懂浏览器默认的滚动行为 #

通常情况下，浏览器会把**根元素（html）**作为默认的滚动容器——当页面内容超出视口高度时，滚动条是属于html元素的，body本身并不会主动成为滚动容器。而你提供的代码想要把滚动容器转移到body上，就必须打破这个默认逻辑。

2. 为什么必须给html加overflow:hidden？ #

你提到body的高度只有50vh，看起来html不会溢出，但这里的关键不是html有没有被内容撑开，而是要强制浏览器放弃根元素的滚动控制权：

• 代码里用* {all: unset; display: revert;}重置了所有元素的默认样式，包括html和body的默认margin、padding，以及高度的默认计算方式。
• body设置了overflow-y: scroll和height:50vh，但body内部的内容高度远大于50vh，所以body本身会产生内部溢出，需要滚动。但如果不设置html的overflow:hidden，浏览器的默认机制还是会优先把滚动事件绑定在html上，导致两种问题：
  • 可能出现双重滚动条：html的滚动条和body的滚动条同时存在；
  • body的滚动可能不生效：浏览器直接忽略body的overflow设置，继续使用html作为滚动容器。

设置html {overflow:hidden}相当于告诉浏览器：“根元素不需要处理滚动，所有滚动逻辑交给body来管”，这样body的滚动设置才能正常生效。

3. 你可以自己验证一下 #

试试去掉html的overflow:hidden，大概率会看到html上出现滚动条，而body的滚动条要么不显示，要么即使显示也无法正常触发滚动——这就是浏览器默认滚动机制在“抢控制权”。

内容的提问来源于stack exchange，提问作者fweth