给html/body添加overflow-x:hidden后子div在父容器内垂直滚动是什么原因？

1. CSS规范的overflow属性联动规则：当你为任意元素设置overflow-x: hidden时，如果该元素的overflow-y保持默认值visible，浏览器会自动将overflow-y的计算值重置为auto。这就导致你给html、body或者外层wrapper加overflow-x:hidden的时候，相当于同时给这些元素加了overflow-y:auto，元素本身变成了可滚动容器，打断了默认的页面滚动链，子元素的滚动事件会优先被这个父容器捕获，而不是冒泡到根视口触发整个页面滚动。
2. 部分区块滚动正常部分异常的表现，和浏览器默认的滚动锚定（Scroll Anchoring）行为有关，当容器内有触发偏移的交互元素（比如悬停时的样式变化），浏览器会自动调整滚动位置来锚定当前可视内容，在已经被设置为overflow:auto的父容器里就会出现局部滚动的异常表现。
3. 你检查时没有发现内容溢出，是因为overflow-y:auto只有在内容实际超出容器高度时才会显示滚动条，但滚动链的优先级已经被修改，哪怕内容暂时没有溢出，滚动事件的传播逻辑也已经和默认状态不一致。

方案1：单独设置根节点的overflow属性 #

不要同时给html和body加overflow属性，仅给html节点设置以下样式即可：

html {
  overflow-x: hidden;
  overflow-y: visible; /* 显式指定y轴为visible，避免浏览器自动重置为auto */
}

不需要给body节点添加任何overflow相关样式，保持默认值即可，该方案可以保留全局视口原生滚动的体验，同时完全禁止横向滚动。

方案2：外层包裹容器统一接管滚动 #

如果必须要把overflow-x:hidden加在wrapper外层容器上，需要显式指定容器的高度和滚动行为，统一全局滚动逻辑：

/* 先全局重置默认样式，避免盒模型导致的宽度溢出 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  overflow: hidden; /* 禁止根视口滚动，所有滚动行为交给wrapper处理 */
}
.wrapper {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100dvh; /* 移动端使用动态视口高度，避免地址栏伸缩导致的高度计算异常 */
}

方案3：补充阻止局部滚动冒泡 #

如果只有个别区块出现局部滚动异常，可以给对应区块添加样式阻止滚动行为向上传递，作为上述方案的补充：

.content-section-1, .content-section-4 {
  overscroll-behavior: none;
}

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