Question

现在使用此代码（及其中的许多变体），但滚动轨迹变为深灰色，类似＃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;
}

Answer 1

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

Answer 2

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

Answer 3

将此代码嵌入到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;
}

Answer 4

尝试这个，它对我来说很好。

在CSS中：

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

这是工作演示： https://jsfiddle.net/qzsbf0tm/

Answer 5

要控制滚动条的"title":#if($title)"$title"#{else}null#end,，您需要定位主要元素，而不是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，因此仍然优选使用带有polyfill的js： CSS customized scroll bar in div

Answer 6

只需将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;
}

Answer 7

如果您使用此：

body {
    overflow: overlay;
}

然后，滚动条还将在整个页面上使用透明背景。这还将把滚动条放在页面内，而不是删除一些要放入滚动条的宽度。

这是演示代码。我无法将其放入任何Codepen或jsfiddle中，显然我花了一段时间才弄清楚，但它们没有显示透明性，我也不知道为什么。

但是将其放在html文件中应该没问题。

<!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>

您还可以将其应用于其他元素，例如任何滚动框。使用检查器模式时，可能必须将溢出隐藏起来，然后再返回其他任何内容。它可能需要刷新。之后，应该可以在滚动条上工作而不必再次刷新它。只需注意这是用于检查器模式的。

Answer 8

如果没有任何宽度为100％的内容，则可以将轨道的背景色设置为与主体背景相同的颜色

Answer 9

可能为时已晚，但仍然如此。对于那些没有得到任何方法帮助的人，我建议使用纯 JavaScript 制作自定义滚动条。

首先，在 style.css

中禁用标准滚动条

::-webkit-scrollbar{
    width: 0;
}

现在让我们创建滚动条容器和滚动条本身

<!DOCTYPE HTML>
<html lang="ru">
<head>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="main.js"></script>
 ...meta
</head>

<body>

<div class="custom_scroll">
    <div class="scroll_block"></div>
</div>

...content

<script>customScroll();</script>
</body>
</html>

同时，我们将连接customScroll()函数，并在文件main.js

中创建它

 function customScroll() {
    let scrollBlock = documentSite.querySelector(".scroll_block");
    let body = documentSite.querySelector("body");
    let screenSize = screenHeight - scrollBlock.offsetHeight;
    documentSite.addEventListener("scroll", () => {
        scrollBlock.style.top = (window.pageYOffset / body.offsetHeight * (screenSize + (screenSize * (body.offsetHeight - (body.offsetHeight - screenHeight)) / (body.offsetHeight - screenHeight)) )) + "px";
    });
    setScroll(scrollBlock, body);
}

function setScroll(scrollBlock, body) {
    let newPos = 0, lastPos = 0;
        scrollBlock.onmousedown = onScrollSet;
        scrollBlock.onselectstart = () => {return false;};

    function onScrollSet(e) {
        e = e || window.event;
        lastPos = e.clientY;
        document.onmouseup = stopScroll;
        document.onmousemove = moveScroll;
        return false;
    }

    function moveScroll(e) {
        e = e || window.event;
        newPos = lastPos - e.clientY;
        lastPos = e.clientY;
        if(scrollBlock.offsetTop - newPos >= 0 && scrollBlock.offsetTop - newPos <= Math.ceil(screenHeight - scrollBlock.offsetHeight)) {
            window.scrollBy(0, -newPos / screenHeight *  body.offsetHeight);
        }
    }

    function stopScroll() {
        document.onmouseup = null;
        document.onmousemove = null;
    }
}

为滚动条添加样式

.custom_scroll{
    width: 0.5vw;
    height: 100%;
    position: fixed;
    right: 0;
    z-index: 100;
}

.scroll_block{
    width: 0.5vw;
    height: 20vh;
    background-color: #ffffff;
    z-index: 101;
    position: absolute;
    border-radius: 4px;
}

完成！

Answer 10

执行此操作的 standard 方法（目前仅适用于 Firefox）是：

:root {
  scrollbar-color: transparent transparent;
}

透明滚动条与CSS

10 个答案: