Chrome中scroll-behavior: smooth作用于<html>标签失效问题求助

你遇到的是Chromium内核特有的滚动上下文冲突问题——当<html>和<body>同时设置height: 100%时，浏览器会错误地切换滚动载体，导致给<html>设置的scroll-behavior: smooth完全失效。

解决方案：调整<body>的高度属性 #

把基础样式中<body>的height: 100%改为min-height: 100%，同时保留<html>的scroll-behavior: smooth设置：

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth; /* 保留在html上 */
}
body {
    width: 100%;
    min-height: 100%; /* 替换height为min-height */
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
}

原理说明 #

在Chromium中，当<html>和<body>都设置height: 100%时，<body>会被渲染成一个与视口等高的固定高度容器。当页面内容超过视口高度时，浏览器会将滚动行为绑定到<body>而非<html>，但此时你只给<html>加了平滑滚动规则，自然不会生效。

将<body>的height改为min-height: 100%后，<body>会随内容自动拉伸高度，<html>作为根容器会重新成为滚动上下文的载体，scroll-behavior: smooth就能正常作用于锚点链接的滚动。

额外验证点 #

如果修改后仍有问题，可以检查：

• 确保没有其他CSS规则给<html>或<body>设置overflow: hidden
• 不需要给<html>额外加overflow-y: scroll，scroll-behavior会作用于默认的滚动上下文

这样修改后，锚点链接的平滑滚动在Chromium、Firefox、Safari中都能正常工作，且不需要切换到自定义滚动容器。

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