使用CSS实现透明滚动条

Question

使用CSS实现透明滚动条

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

- user3260950

13个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Caesare · Answer 1

如果您没有任何100%宽度的内容，您可以将轨道的背景颜色设置为与页面背景相同的颜色。

- Jos Koji · Answer 2

据我所知，在webkit浏览器中，滚动条背景颜色的优先级如下：

滚动条轨道 > 滚动条 > HTML > body

HTML {
  background: red; <- Third Priority
}

body {
  background: blue; <- Fourth Priority
}

::-webkit-scrollbar {
  appearance: none;
  background: green; <- Second Priority
}

::-webkit-scrollbar-track {
  background: purple; <- First Priority
}

要使滚动条轨道透明，您需要将其设置为透明/省略滚动条和滚动条轨道的颜色。然后在 body 或 HTML 上设置背景颜色。

问题在于，如果您想使用除纯色以外的其他东西。主页面的滚动条不接受任何背景图像，只接受颜色。无论放置在何处。

我找到了一个解决方法，即将 body 中的所有内容包装在一个 div 内，因为元素上的滚动条可以使用背景图像。然后对该 div 设置固定高度，并在其上设置 overflow-y: auto; 或 overflow-y: scroll;。

这里有一个演示。

- koskokos_231 · Answer 3

可能已经有点晚了，但还是要说一下。对于那些没有通过任何方法得到帮助的人，我建议使用纯JavaScript制作自定义滚动条。

首先，在 style.css 中禁用标准滚动条。

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

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

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

<body id="body">

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

...content
<script src="main.js"></script>
<script>customScroll();</script>
</body>
</html>

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

 function customScroll() {
    let scrollBlock = document.getElementById("scroll_block");
    let body = document.getElementById("body");
    let screenSize = screen.height - scrollBlock.offsetHeight;
    document.addEventListener("scroll", () => {
        scrollBlock.style.top = (window.pageYOffset / body.offsetHeight * (screenSize + (screenSize * (body.offsetHeight - (body.offsetHeight - screen.height)) / (body.offsetHeight - screen.height)) )) + "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(screen.height - scrollBlock.offsetHeight)) {
            window.scrollBy(0, -newPos / screen.height *  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;
}

完成！