Question

有什么方法可以仅更改CSS中滚动条的颜色，但可以保持原生的“不滚动时消失”效果。基本上，我只想将本机滚动条变成蓝色，而不是默认的黑色/深灰色，但是只要我应用这样的代码

::-webkit-scrollbar {
    width:5px;
}

::-webkit-scrollbar-track {
    background: transparent; 
}

::-webkit-scrollbar-thumb {
    background: blue; 
    border-radius:5px;
    opacity:0.5;
}

滚动条看起来也像我想要的那样，但是它是持久的，而不是在我不滚动时消失。有什么办法可以在自定义滚动条上保持这种效果？

编辑-根据要求，我当前的浏览器是google chrome 73.0.3683.103

Answer 1

仅使用css和webkit最多可以做的是使用：hover /：active选择器来显示或隐藏滚动条。问题是，这将适用于悬停/选择，而不适用于手指滑动或鼠标滚轮。同样，此webkit属性在Firefox或Edge上将不起作用。

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 5px;
    opacity: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: blue;
    border-radius: 5px;
    opacity: 0.5;
}

有关webkit scrollbar的信息

This question很好地说明了悬停时的平滑过渡

Answer 2

希望晚点回答仍然有用。

我不认为您可以使用纯CSS来做到这一点，（但我可能错了）

您可以使用一些jQuery来帮助您。我在这里工作时很费劲：https://jsfiddle.net/kingafrojoe/Le253gdw/29/

在CSS .has-scroll中，如下所示滚动条选择器

/* Add a css class to your scroll selectors */
.has-scroll::-webkit-scrollbar {
    width: 15px;
}
.has-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.has-scroll::-webkit-scrollbar-thumb {
    background: blue;
    border-radius: 5px;
    opacity: 0.5;
}
#tall {
    height: 500px;
    width: 100%;
    background: #00ffff;
    display: block;
}

在您的HTML中，您需要一个包装div来包装文档的整个主体。 body类还获得了has-scroll类，jQuery将控制该类。

<body class="has-scroll">
    <div id="site">

        <div id="tall"> I am tall content</div>

        <!-- ALL other page HTML -->
    </div>
</body>
</html>

然后使用一些jQuery来检测内容和窗口的高度。如果内容比窗口高，则需要一个滚动条，否则滚动条可以执行默认行为

<script type="text/javascript">

jQuery(window).load(function(){

    var _body = $('body');
    var _site = $('#site');

    $(window).resize(function(){
        show_scroll();// call the function on the window resize
    });

    show_scroll();// call the function

    function show_scroll(){
        // if the content wrapper is taller than the window add the has-scroll class,
        // else remove the has scroll class to return default scroll behavior.
        if(_site.outerHeight()>$(window).outerHeight()){
            _body.addClass('has-scroll');
        }else{
            _body.removeClass('has-scroll');
        }
    }
});
</script>

自定义滚动条，但保持消失的效果

2 个答案: