为何`scrollbar-gutter: stable`在`body`元素上无法生效？

根据scrollbar-gutter的规范，当元素同时设置scrollbar-gutter: stable和overflow: hidden时，应当显示滚动条槽。但在Chrome和Firefox中测试发现，该组合对body元素无效，却能在div等普通块级元素上正常工作，原因如下：

核心原因：body元素的特殊滚动机制 #

浏览器对body和html元素的滚动行为有特殊处理逻辑：

• 默认情况下，html是视口滚动的根容器，body的overflow属性会被代理到视口层面，而非让body自身成为独立的滚动容器。
• 当给body设置overflow: hidden时，浏览器实际是隐藏了视口的滚动条，而非让body生成自己的滚动上下文。而scrollbar-gutter仅对拥有独立滚动上下文的元素生效，因此无法在这种情况下作用于body。

验证示例代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <style>
      body {
        border: 1px solid;
        overflow: hidden;
        scrollbar-gutter: stable;
      }

      div {
        border: 1px solid;
        overflow: hidden;
        scrollbar-gutter: stable;
      }
    </style>
  </head>
  <body>
    <hr />

    <div>
      <hr />
    </div>
  </body>
</html>

让body元素生效的解决方法 #

要让scrollbar-gutter在body上生效，需要先让body成为独立的滚动容器：

1. 给html元素设置overflow: hidden，切断它与视口滚动的关联；
2. 给body设置overflow: auto（或scroll），让它生成自己的滚动上下文；
3. 再添加scrollbar-gutter: stable即可生效。

修正后的代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <style>
      html {
        overflow: hidden;
      }
      body {
        border: 1px solid;
        overflow: auto;
        scrollbar-gutter: stable;
        height: 100vh; /* 确保body占满视口高度 */
      }

      div {
        border: 1px solid;
        overflow: hidden;
        scrollbar-gutter: stable;
      }
    </style>
  </head>
  <body>
    <hr />
    <div>
      <hr />
    </div>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Oliver Joseph Ash