如何使滚动条重叠页面内容

Question

我想制作与页面重叠的滚动条。我想知道是否有办法用 pure CSS 来做到这一点。我阅读了一篇关于使用 CSS (https://css-tricks.com/custom-scrollbars-in-webkit) 设计滚动条样式的文章，但我没有得到想要的结果。我认为可以用固定位置的 JavaScript 和 HTML 元素来做，但我更喜欢用 CSS 来做。

Answer 1

你可以试试把Scrollbar的背景改成透明-

::-webkit-scrollbar-track {background: transparent}

Answer 2

我的项目中也有同样的需求。

解决方法如下：

overflow: overlay

希望对您有所帮助

Answer 3

正如 Anugraha Acharya 所说，唯一的 CSS 选项是：

overflow: overlay;

但值得注意的是，这已经被弃用了，所以不知道它在 Chromium / Webkit 中还能工作多久。

Firefox 不支持它，因此您必须执行以下操作以确保 Firefox 也可以滚动：

overflow: scroll;
overflow: overlay;

有了这个，Firefox 将呈现为原始 post 中的“正常”图表，而 Chromium 将呈现为“我希望滚动的外观”。此外，如果 Chromium 掉落它，它仍然可以使用。

这目前在 2022 年 1 月有效。

---

我相信，Mozilla 被弃用意味着它从未被正式添加，而不是被考虑过，现在已被删除。因此，希望它会得到考虑并正式生效。同时，您自己承担风险。