如何让滚动条与页面内容重叠

Question

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

Answer 1

我的项目中有同样的要求。

解决方案如下：

overflow: overlay

希望有帮助

Answer 2

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

overflow: overlay;

但值得注意的是，这已被弃用，因此不知道它在 Chromium / Webkit 中能运行多久。

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

overflow: scroll;
overflow: overlay;

这样，Firefox 将呈现为原始帖子中的“正常”图，而 Chromium 将呈现为“我想要滚动的外观”。另外，如果 Chromium 掉落它，它仍然可以使用。

目前此功能自 2022 年 1 月起生效。

---

我相信，Mozilla 所说的“已弃用”意味着它从未被正式添加，而不是被考虑过并且现在已被删除。因此，希望它能够被考虑并正式发布。与此同时，您需要自行承担风险。

Answer 3

overflow: overlay

约束似乎不再起作用了。

在 2024 年，您可以检查 OverlayScrollbars 插件，它可能会满足此需求。 还有一个相关的插件，SimpleBar，它为您提供简约的滚动条，而不是笨重的 Chrome 默认栏。

就我而言，这些软件包中列出的限制似乎有点令人担忧。我意识到这并不是对此处发布的问题的真正答案，但就我而言，我只是决定遵循更安全的路径，并将 css 中的极简风格应用于滚动条。目前，以下内容在 Chrome 中运行良好：

/* Make scrollbar less intrusive in Chrome: */

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: #f1f1f100;
}

::-webkit-scrollbar-thumb {
  background: #80808080;
}

Answer 4

您可以尝试将滚动条的背景更改为透明-

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