Edit:
The solution that I gave with overflow: overlay still works in browsers like Google Chrome and you can still see my answer below. However, overflow: overlay https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#overlay was marked depreciated.
Whether an alternative solution exists, is unknown, but the one mentioned below still works for Google Chrome.
From what I understood from https://github.com/w3c/csswg-drafts https://github.com/w3c/csswg-drafts, is that the alternative was ment to be scrollbar-gutter https://drafts.csswg.org/css-overflow/#scrollbar-gutter-property. But there's actually nothing pointing towards an alternative solution, except people saying that there would be.
的文档scrollbar-gutter说，用户代理能够控制是否显示经典滚动条或覆盖滚动条。 csswg-drafts 的人们表示，那些想要实现这样一个功能的人似乎对此并不感兴趣。
如果我们想要替代解决方案，那么我们必须在这里告诉他们：https://github.com/w3c/csswg-drafts/issues/7716 https://github.com/w3c/csswg-drafts/issues/7716
我不能单独建议这一点，他们需要更多对拥有“功能”感兴趣的人，让网站作者控制是否应该使用经典滚动条或覆盖滚动条。
关于 Google Chrome 的覆盖滚动条。他们做了一个实验，允许客户端用户启用它chrome://flags/然后搜索“覆盖滚动条”。
Answer:
如果你用它来表示“body”：
body {
overflow: overlay;
}
然后，滚动条也会在页面上呈现透明背景。
这也将把滚动条放在页面内，而不是删除一些宽度以放入滚动条。
这是一个演示代码。我无法将其放入任何 codepen 或 jsfiddle 中，显然我花了一段时间才弄清楚，但它们没有显示透明度，我不知道为什么。
但将其放入 HTML 文件应该没问题。
能够把它放在小提琴上：https://jsfiddle.net/3awLgj5v/ https://jsfiddle.net/3awLgj5v/
<!DOCTYPE html>
<html>
<style>
html, body {
margin: 0;
padding: 0;
}
body {
overflow: overlay;
}
.div1 {
background: grey;
margin-top: 200px;
margin-bottom: 20px;
height: 20px;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-thumb {
background: rgba(90, 90, 90);
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.2);
}
</style>
<body>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>
我猜最好的测试方法是创建一个本地 html 文件。
您还可以将其应用于其他元素，例如任何滚动框。使用检查器模式时，您可能必须将溢出隐藏，然后返回到其他任何内容。可能需要刷新一下。之后应该可以在滚动条上工作而无需再次刷新它。请注意，这是针对检查器模式的。
