Html 带css的透明滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23200639/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transparent scrollbar with css
提问by user3260950
Now use this code (and many variations of this), but scroll track get dark-grey color, something like #222222 or near this. Find many examples, but all of them give same result. Opera, Chrome and Firefox show this bug. How to fix?
现在使用此代码（以及此代码的许多变体），但滚动轨道将变为深灰色，类似于 #222222 或接近此颜色。找到许多示例，但所有示例都给出相同的结果。Opera、Chrome 和 Firefox 显示此错误。怎么修？
#style-3::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: transparent;
}
#style-3::-webkit-scrollbar {
width: 6px;
background-color: transparent;
}
#style-3::-webkit-scrollbar-thumb {
background-color: #000000;
}
回答by Void Spirit
With pure css it is not possible to make it transparent. You have to use transparent background image like this:
使用纯 css 不可能使其透明。您必须像这样使用透明背景图像：
::-webkit-scrollbar-track-piece:start {
background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}
::-webkit-scrollbar-track-piece:end {
background: transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}
回答by 4dgaurav
.scrollable-content {
overflow-x:hidden;
overflow-y:scroll; // manage scrollbar content overflow settings
}
.scrollable-content::-webkit-scrollbar {
width:30px; // manage scrollbar width here
}
.scrollable-content::-webkit-scrollbar * {
background:transparent; // manage scrollbar background color here
}
.scrollable-content::-webkit-scrollbar-thumb {
background:rgba(255,0,0,0.1) !important; // manage scrollbar thumb background color here
}
回答by karl-police
If you use this:
如果你使用这个：
body {
overflow: overlay;
}
The scrollbar will then also take transparent backgrounds across the page. This will also put the scrollbar inside the page instead of removing some of the width to put in the scrollbar.
然后滚动条也会在整个页面上采用透明背景。这也会将滚动条放在页面内，而不是删除一些宽度以放入滚动条。
Here is a demo code. I wasn't able to put it inside any of the codepen or jsfiddle, apperantly it took me a while until I figured out, but they don't show the transparency, and I don't know why.
这是一个演示代码。我无法将它放入任何 codepen 或 jsfiddle 中，显然我花了一段时间才弄明白，但它们没有显示透明度，我不知道为什么。
But putting this in a HTML file should go fine.
但是把它放在一个 HTML 文件中应该没问题。
Was able to put it on fiddle: 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>Best way to test it is to create a local html file, I guess.
我想测试它的最佳方法是创建一个本地 html 文件。
You can also apply that on other elements, such as any scrolling box. While using inspector mode, it could be that you have to put the overflow to hidden and then back to anything else. It probably needed to refresh. After that it should be possible working on scrollbar without having to refresh it again. Just note that was for the inspector mode.
您还可以将其应用于其他元素，例如任何滚动框。在使用检查器模式时，您可能必须将溢出置于隐藏状态，然后再返回到其他任何内容。它可能需要刷新。之后应该可以在滚动条上工作而无需再次刷新它。请注意，这是针对检查员模式的。
回答by vilsbole
To control the background-colorof the scrollbar, you need to target the primary element, instead of -track.
要控制background-color滚动条的 ，您需要定位主要元素，而不是-track。
::-webkit-scrollbar {
background-color: blue;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
I haven't succeeded in rendering it transparent, but I did manage to set its color.
我没有成功渲染它transparent，但我确实设法设置了它的颜色。
Since this is limited to webkit, it is still preferable to use JS with a polyfill: CSS customized scroll bar in div
由于这仅限于 webkit，还是最好使用带有 polyfill 的 JS: CSS 自定义滚动条 in div
回答by Dice
Just set display:none;as an attribute in your stylesheet ;)
It's way better than loading pictures for nothing.
只需display:none;在样式表中设置为一个属性即可；)
这比无用加载图片要好得多。
body::-webkit-scrollbar {
width: 9px;
height: 9px;
}
body::-webkit-scrollbar-button:start:decrement,
body::-webkit-scrollbar-button:end:increment {
display: block;
height: 0;
background-color: transparent;
}
body::-webkit-scrollbar-track-piece {
background-color: #ffffff;
opacity: 0.2;
/* Here */
display: none;
-webkit-border-radius: 0;
-webkit-border-bottom-right-radius: 14px;
-webkit-border-bottom-left-radius: 14px;
}
body::-webkit-scrollbar-thumb:vertical {
height: 50px;
background-color: #333333;
-webkit-border-radius: 8px;
}
回答by karthik vishnu kumar
Try this one, it works fine for me.
试试这个，对我来说效果很好。
In CSS:
在 CSS 中：
::-webkit-scrollbar
{
width: 0px;
}
::-webkit-scrollbar-track-piece
{
background-color: transparent;
-webkit-border-radius: 6px;
}
and here is the working demo: https://jsfiddle.net/qpvnecz5/
这是工作演示：https: //jsfiddle.net/qpvnecz5/
回答by Caesare
if you don't have any content with 100% width, you can set the background colorof the track to the same color of the body's background
如果你没有任何 100% 宽度的内容，你可以将轨道的背景颜色设置为与正文的背景颜色相同
