使用scrollbar-gutter: stable时如何避免滚动条槽位切割固定头部

为避免滚动条显示、隐藏引发布局偏移，使用scrollbar-gutter: stable属性后确实实现了布局稳定效果，但为滚动条预留的槽位空间会贯穿固定头部的右侧边缘，影响显示效果。预期实现效果为：要么将预留的滚动条槽位隐藏在头部下方，要么仅让主内容容器预留滚动条空间，使头部始终占满浏览器窗口100%宽度。

注意：需将代码片段运行结果切换为「全屏页面」模式才可复现该问题。

原始问题代码如下：

html {
  scrollbar-gutter: stable
}

body {
  background-color: #dadbd6;
}

nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  background: #C0081C;
  padding: 0 100px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  filter: drop-shadow(0 3px 5px #bbb);
}

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  color: #fff;
  padding: 0 20px; 
  text-decoration: none; 
}

.top {
margin-top: 100px;
}

<nav>
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
  </ul>
</nav>

<div class="top">
<p>页面内容区会根据内容量动态显示/隐藏滚动条。</p>
<p>使用'scrollbar-gutter: stable'预留滚动条空间后，预留槽位会直接穿过固定头部显示。</p>
<p>需要实现槽位隐藏在头部下方，或是仅主内容区预留滚动条空间、头部始终满宽的效果。</p>   
</div>

出现该现象的核心逻辑是：scrollbar-gutter: stable设置在html根元素上时，根元素的内容可用宽度会自动扣除滚动条槽位的宽度。此时固定定位的导航栏设置width: 100%，宽度参考的是根元素的内容可用宽度，而非整个视口宽度，因此导航栏右侧会空出和槽位等宽的缝隙，直接露出下方的滚动条预留槽位。

提供两种可直接落地的修复方案，可根据项目场景选择：

方案1：最小改动修复（适配不透明头部） #

仅修改导航栏样式，将宽度单位改为vw，让导航栏直接铺满整个视口，利用自身不透明背景盖住下方的滚动条槽位即可，不需要改动原有滚动逻辑。
仅需调整nav的CSS属性：

nav {
  position: fixed;
  top: 0;
  left: 0; /* 确保导航靠左对齐，不受默认边距影响 */
  width: 100vw; /* 宽度取视口全宽，覆盖滚动条槽位区域 */
  z-index: 99; /* 确保导航层级在最上层 */
  height: 80px;
  background: #C0081C;
  padding: 0 100px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  filter: drop-shadow(0 3px 5px #bbb);
}

该方案改动量极小，适合头部背景完全不透明的项目快速修复。

方案2：滚动容器迁移（适配透明/半透明头部） #

如果头部是透明、半透明效果，方案1会露出被盖住的槽位边缘，此时可以将滚动容器从默认的html迁移到body，仅给body设置滚动条槽位，固定导航脱离文档流不会受body的槽位影响，天然铺满视口宽度。
修改后的全局CSS如下：

/* 禁用根元素默认滚动 */
html {
  height: 100%;
  overflow: hidden;
}

/* 将body设为滚动容器，仅在这里预留滚动条槽位 */
body {
  height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable;
  margin: 0; /* 清除浏览器默认边距 */
  background-color: #dadbd6;
}

/* 导航栏样式无需修改width，天然铺满视口 */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  background: #C0081C;
  padding: 0 100px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  filter: drop-shadow(0 3px 5px #bbb);
}

/* 其余原有样式保持不变 */
nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}

nav ul li {
  list-style: none;
}

nav ul li a {
  color: #fff;
  padding: 0 20px; 
  text-decoration: none; 
}

.top {
margin-top: 100px;
}

该方案从根源上隔离了滚动条槽位的作用范围，无论头部是什么样的背景样式都不会出现槽位穿帮的问题，适配性更强。

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