logo标签列表

使用CSS实现透明滚动条

htmlcssscrollbar
59
现在使用这段代码（以及许多变体），但滚动轨道会变成深灰色，类似于#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;
}
13个回答
61

编辑：

我之前提供的使用overflow: overlay的解决方案在像Google Chrome这样的浏览器中仍然有效，你可以在下面继续看到我的答案。然而，overflow: overlay已被标记为过时。

目前是否存在替代方案尚不清楚，但下面提到的一个解决方案仍然适用于Google Chrome。 根据我从https://github.com/w3c/csswg-drafts了解到的情况，替代方案应该是scrollbar-gutter。但实际上没有任何迹象表明有替代方案，除了一些人说可能会有。

scrollbar-gutter的文档说明，用户代理能够控制它显示经典滚动条还是覆盖滚动条。而csswg-drafts的人们表示，似乎对实现这样一个功能的人们并不感兴趣。

如果我们想要一个替代方案，那么我们必须告诉他们，在这里：https://github.com/w3c/csswg-drafts/issues/7716 我一个人无法提出这个建议，他们需要更多对使用“特性”来控制网站作者是否使用经典或覆盖滚动条感兴趣的人。
关于谷歌浏览器的覆盖滚动条。他们进行了一个实验，允许客户用户在chrome://flags/启用它，然后搜索“Overlay Scrollbars”。
回答：
如果你将其用于"body"：
body {
    overflow: overlay;
}

滚动条将在整个页面上也采用透明背景。 这样也会将滚动条放在页面内部，而不是减少一些宽度来放置滚动条。
这里是一个演示代码。我无法将其放在任何codepen或jsfiddle中，显然我花了一段时间才弄清楚，但它们不显示透明度，我不知道为什么。
但将其放入HTML文件中应该没问题。
已经成功将其放在fiddle上：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文件，我猜。
你也可以将其应用于其他元素，比如任何滚动框。在使用检查器模式时，可能需要将溢出设置为隐藏，然后再设置为其他值。可能需要刷新一下。之后就可以在不必再次刷新的情况下操作滚动条了。只要注意这是针对检查器模式的。
10
overlay 值现在已被弃用。https://developer.mozilla.org/zh-CN/docs/Web/CSS/overflow#Values - Simon Baumgardt-Wellander
2
如何在 div 元素上实现此效果？ - Maciej Bledkowski
1
除了<body>元素，我无法让它在任何其他元素上运行。 - Nick Retallack
1
哎呀，我很高兴看到这个解决方案起作用，然后验证了@SimonBaumgardt-Wellander的评论，即“overlay”已经被弃用。“与auto相同的行为，但滚动条绘制在内容的顶部而不是占用空间。仅受基于WebKit（例如Safari）和基于Blink（例如Chrome或Opera）的浏览器支持。”缺乏浏览器支持可能是@MaciejBledkowski和@nick-retallack无法看到它工作的原因。 - digiwand
2
好的，但是有什么替代方案吗？每个人都迅速指出overlay已经被弃用了，但是没有人知道它的替代方案是什么。如果没有替代方案，为什么要将其弃用呢？ - arunwithasmile
据我所了解，目前还没有明确的替代方案，除了用户代理。因此，他们说用户可以转到浏览器设置并启用覆盖滚动条，作者不应该强制执行它。但我不喜欢作者无法强制执行的事实。 - karl-police
20

纯 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;
}
10
这是关于音轨背景颜色的第一个准确的陈述。许多人只是假设它可行而没有实际测试。谢谢！ - sinrise
当我尝试创建一个4x4像素的透明PNG并使用它时，这个方法没有起作用。 - binaryfunt
@binaryfunt 无法确定确切时间，但当时它运作正常。请尝试其他维度。 - Void Spirit
使用透明 PNG 的方法在 FireFox 上不起作用。 - Terry
@Terry 当然在 Firefox 上不起作用。这是仅适用于 WebKit 样式，而 Firefox 不是基于 WebKit 的浏览器。 - tel
13
    .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
    }
1
现在 - 只有默认滚动条。 - user3260950
1
好的..，我了解了，你需要在你的页面中有一个固定高度的元素。请查看此fiddle演示http://jsfiddle.net/4dgaurav/F9p7S/64/。 - 4dgaurav
2
我一再看到这种情况。背景颜色在滚动条轨道或轨道块上不起作用（我相信其他元素也是如此）。滚动条轨道似乎从body标签获取其颜色。 - sinrise
我刚刚用原始代码创建了一个小测试，其中body的类名为“scrollable-content”- https://jsfiddle.net/8b4etky5/ - MineCMD
在Chrome上运行得非常好。但是在Firefox上无法工作。 - Mbotet
显示剩余5条评论
6

目前在Firefox浏览器中，标准方法是：

:root {
  scrollbar-color: transparent transparent;
}
5
将以下代码嵌入您的 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;
}
虽然这可能回答了问题... 请添加代码的解释。 - Arghya Sadhu
1
我在这里缺少什么 - 滚动条宽度为0使其透明？ - Simon_Weaver
1
确认这对我的目的有效。谢谢。对于那些感兴趣的人，可以参考MDN文档：https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar - OXiGEN
2

只有这段代码对我有用 -

<!DOCTYPE html>
<html>
<style>
    body {
       overflow: overlay;
    }

    ::-webkit-scrollbar {
       width: 10px;
       background: transparent;
    }

    ::-webkit-scrollbar-thumb {
       background: white;
       border-radius: 2px;
    }
</style>
  
<body>

  ..Your code here

</body>
</html>
0

试试这个，对我来说很好用。

CSS中：

::-webkit-scrollbar
{
    width: 0px;
}
::-webkit-scrollbar-track-piece
{
    background-color: transparent;
    -webkit-border-radius: 6px;
}

这里是可工作的演示： https://jsfiddle.net/qpvnecz5/

14
背景色未被应用。原因是宽度太小，导致看起来“透明”。我知道这是因为我尝试将背景颜色设置为透明，但不起作用，并且在您的 fiddle 中拼错了“color”单词。 :D - sinrise
0

我成功地实现了透明背景和透明滚动条，就像这样：

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar {
  width: 12px;
  background-color: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: rgba(33, 37, 41, 0.45); // change 0.45 to 0 to make it invisible
}

你也可以将以下代码添加到body元素中，以在网站内容上方显示滚动条：

overflow: overlay;
0

只需在样式表中设置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;
}
4
这不起作用。在Chrome中，它会留下白色背景。请在发布答案之前进行测试。 - Furkan Toprak
0

要控制滚动条的 background-color，需要针对主要元素进行定位，而不是 -track。

::-webkit-scrollbar {
    background-color: blue;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

我还没有成功地将它渲染为透明，但我成功地设置了它的颜色。

由于这仅限于Webkit，因此最好使用JS与polyfill： CSS自定义滚动条在div中

3
这并没有回答问题。 - ki9
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接