scroll-behavior、overflow-anchor等CSS属性应设置在html还是body标签？

嘿，这个问题抓得很准！咱们直接说结论：把这三个样式规则写在<html>标签上是更合理的选择，具体原因我给你拆成几点讲：

• overflow-y: scroll的生效逻辑：
  浏览器的默认滚动容器其实是根元素<html>，而非<body>。如果给<body>设置overflow-y: scroll，当页面内容高度超过视口时，可能会出现「双重滚动条」的问题（html的滚动条和body的滚动条同时出现），或者滚动条的显示/隐藏依然会导致页面布局跳动。而给<html>设置这个属性，能确保垂直滚动条始终固定显示，彻底避免布局跳动的问题。

• scroll-behavior: smooth的全局生效：
  平滑滚动的特性需要作用于实际的滚动容器才能全局生效。<html>作为根滚动容器，设置scroll-behavior: smooth后，所有锚点跳转、JavaScript触发的滚动（比如window.scrollTo()）都会应用平滑效果。如果放在<body>上，只有当<body>被设置为独立滚动容器（比如给它加了固定高度和overflow: auto）时才会生效，这显然不符合你「全局平滑滚动」的需求。

• overflow-anchor: none的覆盖范围：
  滚动锚定特性是作用于滚动容器的，<html>作为页面最顶层的滚动容器，在这里禁用overflow-anchor，才能确保整个页面的滚动行为都不会被锚定特性干扰。如果只给<body>设置，可能无法覆盖所有场景，比如页面内嵌套的滚动容器之外的区域，锚定特性依然可能生效。

最终推荐的代码写法：

html {
  overflow-y: scroll;
  scroll-behavior: smooth;
  overflow-anchor: none;
}

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