当使用"scrollbar-gutter stable"时，屏幕宽度的计算似乎不准确。

Question

注意：scrollbar-gutter: stable; 特性在 Safari 浏览器中不受支持。此外，该问题仅在 Chrome 中出现，而在 Firefox 中表现如预期。

在使用 scrollbar-gutter: stable 属性尝试将元素固定到视口位置时，我观察到了一些异常行为。

当页面存在滚动条或启用了 stable 模式的滚动条凹槽时，理论上屏幕的总宽度应考虑滚动条/凹槽的宽度并从中减去，以确保例如 right: 0; 的定位不会位于滚动条之后，而是始于滚动条的起始边缘。

然而，在我的示例代码中，宽度计算似乎忽略了滚动条凹槽，提供的全宽尺寸就像没有滚动条凹槽存在一样。这导致红色的 div 无法正确居中，而黄色的 div 则被放置在了滚动条之后（甚至遮挡了一部分文本）。

在我的代码片段中，当你点击屏幕时，div 的宽度会被输出到控制台。你将看到，最初它显示的是正确的宽度，已考虑了滚动条凹槽。但是，没有任何明显的原因，在第二次点击时，宽度突然改变，得到了不正确的值。这是为什么？又该如何解决呢？



const test = document.querySelector(".container");

document.addEventListener("click", () => console.log(test.clientWidth))
html {
  scrollbar-gutter: stable;
}
.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: skyblue;
}
.test1 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10rem;
  height: 10rem;
  background: salmon;
}
.test2 {
  position: fixed;
  right: 0;
  top: 0;
  height: 50%;
  width: 4.5rem;
  background: yellow;
}

  
  Some text example

Joshua Ulrich · Answer

不确定是否满足您所有的需求，但根据您提供的HTML，可以使用网格布局并将鲑鱼色块置于网格的“中心”，通过设置自动的第5行来实现居中。同时，将黄色块放置在指定的4个网格行中的前2行。

移除了所有定位（如fixed等属性），仅使用视口来决定元素的大小。

迅速添加了两个元素，形成一个大“+”符号放置于容器内。
对body和容器都应用了网格布局，这样鲑鱼色和黄色元素都能按照网格布局进行定位。
因此，通过这样的布局，无论怎么调整窗口大小，鲑鱼色块（以及“+”符号）都将保持在网格中心，而黄色块则固定在右侧顶部，占据4个网格行中的前2行。

当页面高度缩窄出现垂直滚动条时，可以看到滚动条出现在黄色块的内边距之上，而不会遮挡文字内容。

或许这种现代CSS布局技巧能更好地满足您的需求。



const container = document.querySelector(".container");

document.querySelector('.test1').addEventListener("click", (event) => {
  event.currentTarget.textContent = document.body.clientWidth + ' | ' + container.clientWidth;
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}

body {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.container {
  scrollbar-gutter: stable;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 4.5em 1fr 4.5em;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  align-items: center;
  justify-content: center;
  background: skyblue;
}

.test1 {
  grid-column: 2;
  grid-row: 1 / 5;
  align-self: center;
  justify-self: center;
  width: 10em;
  height: 10em;
  background: salmon;
}

.test2 {
  grid-row: 1 / 3;
  grid-column: 3;
  height: 50vh;
  width: 4.5em;
  background: yellow;
  padding-right: 1em;
}

.hori {
  grid-row: 1;
  grid-column: 1;
  width: 75vw;
  border: 1px solid blue;
  height: 1px;
  z-index: 100;
}

.vert {
  grid-row: 1;
  grid-column: 1;
  height: 75vh;
  border: 1px solid lime;
  width: 1px;
  z-index: 101;
}

  
  Some text example

Abe Miessler · Answer

已经在Chromium中报告了一个相关的问题：链接（标题为“问题1251856：具有position: fixed的元素应尊重scrollbar-gutter: stable”，该问题自2021年9月提出，截至2024年1月仍处于开放状态）。

根据具体应用场景，可能有方法可以绕过此问题。使用width: 100vw;时，宽度似乎是恒定的。因此，position: fixed; left: 50vw;至少可以避免元素跳跃。而left: 100%; transform: translateX(-100%);可以实现在稳定滚动条凹槽左侧固定元素的效果。（但请注意，不要尝试动态地对html应用overflow: hidden，这会再次触发该问题。）

尚未检查JavaScript解决方案，但可能通过从（隐藏的）元素读取位置信息，获取所需的布局调整值。