不主动滚动时如何使滚动条消失？

Posted 2023-03-05

【中文标题】不主动滚动时如何使滚动条消失？

【英文标题】：How to make a scrollbar disappear when not actively scrolling?

【发布时间】：2015-08-21 19:22:23

【问题描述】：

我在 Chrome 中使用以下 CSS 自定义了滚动条的样式。

::-webkit-scrollbar 
    padding: 1px;
    width: 7px;
    background: none;


::-webkit-scrollbar-thumb 
    background: rgba(255, 255, 255, 0.4);
    -webkit-border-radius: 1ex;

这给了我一个漂亮的滚动条，它类似于默认的 Chrome 滚动条，但颜色为白色（而不是半透明的黑色）。

但是，当我这样做时，我失去了仅当我在 div 中主动滚动时才显示滚动条的属性。

有没有办法只使用 CSS 来获得默认滚动条的这个功能？

【参考方案1】：

试试这个： http://jsfiddle.net/lotusgodkk/eR9SP/70/

CSS：

.scroller::-webkit-scrollbar 
    width: 12px;
    height: 12px;

.scroller::-webkit-scrollbar-track 
    background: white;

.scroller::-webkit-scrollbar-thumb 
    background: #ddd;
    visibility:hidden;

.scroller:hover::-webkit-scrollbar-thumb 
    visibility:visible;

.scroller 
    overflow: auto;
    font: 16px/1.5 Arial;
    color: #444;
    border: 1px solid #ddd;
    margin: 20px;
    padding: 20px;
    max-width: 300px;
    height: 200px;

html：

<div class="scroller">Sample text</div>

【讨论】：

@user3915432 我会为 Firefox 使用 scrollbar- 属性，因为这个答案只考虑 webkit 浏览器（即 Chrome 和 Safari）。供参考：developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars