我想制作一个覆盖页面的滚动条，想知道是否有纯CSS的方法可以做到。我看过一篇关于使用CSS样式化滚动条的文章（https://css-tricks.com/custom-scrollbars-in-webkit），但没有得到我想要的结果。我认为可以使用一些JavaScript和HTML元素来固定位置，但我更喜欢用CSS来实现。
3个回答
32
我在我的项目中也有同样的需求。
以下是解决方案：
overflow: overlay
希望它有所帮助
- Anugraha Acharya
7
1那你把它放在哪里了？使用哪个选择器？ - Wahyu
1在包含内容的 div 中 - Rahul
子节点即使有透明的滚动条轨道，其背景仍然会被裁剪。 - sergio91pt
在可滚动的父选择器中，@Wahyu。 - Anugraha Acharya
2在2019年并没有帮助 - Google Chrome 版本 80.0.3987.87 (正式版) (64位) - godblessstrawberry
显示剩余2条评论
2
正如 Anugraha Acharya 所说，CSS 的唯一选项是：
使用这种方法，Firefox 将呈现为原始帖子中的“Normal”图表，并且Chromium将呈现为“我想要滚动条看起来的样子”。此外，如果Chromium曾经放弃它，它仍然可以使用。
截至2022年1月，此方法目前可用。
我认为，通过弃用，Mozilla 的意思是它从未被正式添加，而不是考虑过并已经被删除。因此，希望它会被考虑并成为官方的。同时，您需要自行承担风险。
overflow: overlay;
但值得注意的是这已经被弃用，因此无法确定在Chromium / Webkit中它将持续多久。
Firefox不支持它，因此您需要执行以下操作以确保Firefox也可以滚动：
overflow: scroll;
overflow: overlay;
使用这种方法，Firefox 将呈现为原始帖子中的“Normal”图表，并且Chromium将呈现为“我想要滚动条看起来的样子”。此外，如果Chromium曾经放弃它，它仍然可以使用。
截至2022年1月，此方法目前可用。
我认为，通过弃用，Mozilla 的意思是它从未被正式添加，而不是考虑过并已经被删除。因此，希望它会被考虑并成为官方的。同时，您需要自行承担风险。
- atwright147
1
1Firefox 喜欢在指事物“已弃用”时，实际上是指“在 Firefox 中无法正常工作”。对于这类情况，请谨慎参考 MDN。 - Glenn Maynard
-4
你可以尝试将滚动条的背景改为透明-
::-webkit-scrollbar-track {background: transparent}
- theLearner
4
它可以工作，但我必须将body的宽度设置为我的显示器宽度。默认情况下，body不会与滚动条重叠。 - Nejc Jezersek
很高兴能帮到你 :) - theLearner
5仅适用于背景，滚动条不能覆盖Webkit中的内容。 - mikl
@mikl，你是如何解决这个问题的？你有可行的解决方案吗？ - Kunal Tyagi
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接