使用滚动条装订线稳定时，屏幕宽度计算不正确

Question

注意：Safari 不支持

scrollbar-gutter: stable;

。此外，该问题仅发生在 Chrome 中，但在 Firebox 中可以正常工作。

当使用

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;
}

<div class="container">
  <div class="test1"></div>
  <div class="test2">Some text example</div>
</div>

Answer 1

不是 100% 确定您的所有要求，但仅给出您所拥有的 HTML，您可以使用网格并将鲑鱼块居中，方法是将其放在带有自动第 5 行的网格的“中心”，并将黄色块放在第一个指定 4 网格行中的 2 行。

删除了所有放置（固定等）并仅使用视图来确定大小。

我快速添加了两个元素，并将它们作为一个大的“+”放在容器上。

我用网格作为身体并放置它们。我还使用了容器网格，并将鲑鱼/黄色也放在容器网格上。

因此，鲑鱼（和“+”）留在网格的中心（使用那里的自动 5），而黄色则位于右上角的两行 4 网格中。

调整到全屏和高度以获得正确的滚动条，您会看到滚动条出现在黄色块的填充“上方”，而没有覆盖文本。

也许这种布局更适合现代 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;
}

<div class="container">
  <div class="test1"></div>
  <div class="test2">Some text example</div>
</div>
<div class="hori">
</div>
<div class="vert">
</div>