文章/答案/技术大牛

发布

问带有css的透明滚动条
EN

Stack Overflow用户

提问于 2014-04-21 23:42:18

回答 11查看 127.7K关注 0票数 41

现在使用这个代码(以及它的许多变体)，但是滚动轨迹会变成深灰色，类似于#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;
}

scrollbar

html

css

回答 11

Stack Overflow用户

发布于 2019-05-30 00:47:09

如果您使用此命令：

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文件。

您也可以将其应用于其他元素，例如任何滚动框。在使用检查器模式时，您可能必须将溢出设置为隐藏，然后再返回到任何其他位置。它可能需要刷新一下。之后，应该可以在滚动条上工作，而不必再次刷新它。请注意，这是针对检查员模式的。

票数 36

Stack Overflow用户

发布于 2015-11-13 13:37:36

使用纯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;
}

票数 18

Stack Overflow用户

发布于 2014-04-21 23:50:08

    .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
    }

票数 8

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23200639

复制

相似问题

问带有css的透明滚动条
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有css的透明滚动条EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有css的透明滚动条
EN