垂直滚动条绝对位置

Question

有没有办法让跨浏览器垂直滚动条具有绝对位置？

我的问题是，滚动条在出现时会改变我网站的宽度，从而在布局中给出一些问题。

我不想删除它，我只是想让它的宽度不干扰我的布局..

谢谢！

Answer 1

由于没有人提到它，如果您想在可用时使用覆盖（例如 Chrome 和 Safari）并在可用时回退到滚动不是，你可以使用下面的。

html {
  overflow-y: scroll;
  overflow-y: overlay;
}

Answer 2

要在滚动条出现时阻止布局移动，您可以使用下面的 css 使滚动条始终可见。

html{
    overflow-y: scroll;
}

Answer 3

始终显示它，以免扰乱您的布局。这就是谷歌所做的；）

Answer 4

正如@Jan所说的overflow：overlay;是被贬低了。

我的问题是滚动条改变了我网站的宽度
通过在我的布局中给出一些问题来出现。

所以，我认为我们可以scrollbar-gutter。 （也许我们必须更改边距或填充）

scrollbar-gutter: stable;
/* or /
scrollbar-gutter: stable both-edges;

Answer 5

您应该使用下面的样式。

scrollbar-gutter: stable;
overflow: auto;

Answer 6

“关键字值 overlay 是 auto 的旧值别名。”声明 MDN。

但是，当将 overflow 与 scrollbar-gutter 结合使用时，它会产生滚动条浮动的效果，如果内容具有页面宽度：

body {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

.content {
  width: 100vw; /* metrics like 100% should also work */
}

Answer 7

仅在 Safari 和 Chrome（即 Webkit）中，您还可以使用：

html{
    overflow-y: overlay;
}

它只会在必要时添加滚动条，并将其放在您的内容上方，这意味着它不会扰乱您的布局。
但请谨慎使用，它是专有的且未记录。