use*_*950 21 html css scrollbar
现在使用此代码(以及此代码的许多变体),但滚动轨迹变为深灰色,类似#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;
}
kar*_*ice 32
如果你使用这个：
body {
overflow: overlay;
}
然后滚动条也会在整个页面上采用透明背景。这也会将滚动条放在页面内，而不是删除一些宽度以放入滚动条。
这是一个演示代码。我无法将它放入任何 codepen 或 jsfiddle 中，显然我花了一段时间才弄明白，但它们没有显示透明度，我不知道为什么。
但是把它放在一个 HTML 文件中应该没问题。
能够把它放在小提琴上：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 文件。
您还可以将其应用于其他元素，例如任何滚动框。在使用检查器模式时，您可能必须将溢出置于隐藏状态，然后再返回到其他任何内容。它可能需要刷新。之后应该可以在滚动条上工作而无需再次刷新它。请注意，这是针对检查员模式的。
Voi*_*rit 12
使用纯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;
}
.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
}
小智 6
将此代码嵌入到您的 css 中。
::-webkit-scrollbar {
width: 0px;
}
/* 追踪 */
::-webkit-scrollbar-track {
-webkit-box-shadow: none;
}
/* 处理 */
::-webkit-scrollbar-thumb {
background: white;
-webkit-box-shadow: none;
}
::-webkit-scrollbar-thumb:window-inactive {
background: none;
}
标准方法（目前仅适用于 Firefox）是：
:root {
scrollbar-color: transparent transparent;
}