html标签设置overflow-y:scroll仅Chrome生效Edge、Firefox无效如何解决

问题原因 #

你给html根标签设置了position: fixed定位，同时给html和body都配置了滚动溢出属性，不同浏览器对根元素的滚动规则处理存在差异：Chrome对根元素做了特殊兼容，固定定位的根元素依然可以触发滚动，而Edge、Firefox严格遵循CSS标准，固定定位的元素脱离正常文档流，高度固定为视口高度，会出现滚动层级冲突，导致滚动失效。

修复步骤 #

• 移除html标签的position: fixed和overflow: scroll属性，根元素不需要设置固定定位，否则会脱离正常文档流，阻断内容溢出的滚动传递
• 保留body的滚动配置，调整为更兼容的属性写法，背景固定效果改用background-attachment: fixed实现
• 调整后的CSS代码如下：

html {
  height: 100%;
  width: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  background-attachment: fixed; /* 实现背景固定不随滚动移动的效果 */
}

body{
    background-color: transparent;
    color: #0d6efd;
    min-height: 100vh;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

• 如果需要强制显示滚动条，把overflow-y: auto改为overflow-y: scroll即可。

额外说明 #

如果你的页面需要实现整页逐屏滚动效果，不建议直接修改根元素的overflow属性，可以自己监听滚轮事件实现切换逻辑，避免不同浏览器的根元素规则差异导致的兼容问题。

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