自定义滚动条但一直消失的效果答案

【问题标题】：Custom scrollbar but keep disappearing effect自定义滚动条但一直消失的效果
【发布时间】：2019-09-07 21:48:26
【问题描述】：

有没有办法只改变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

【问题讨论】：

尽量不要设置宽度。
如果我不设置宽度，自定义滚动条根本不显示
滚动条不会在 Windows 上的 Chrome 中消失，所以也许您可以edit 您的问题来提及您正在测试的操作系统/浏览器...
这是一个小提琴，它显示你的 CSS 工作？只需拖动结果框。 jsfiddle.net/kingafrojoe/Le253gdw/1
如果您打算有效地使用它，我不建议使用样式类型。 Edge 仍然不支持它，其他浏览器仅部分支持：(caniuse.com/#feat=css-scrollbar)。这个没有出现的问题可能是父元素溢出的问题。

标签： html css

【解决方案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 有一个很好的悬停平滑过渡示例

【讨论】：

【解决方案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>

【讨论】：