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

我用以下CSS在Chrome中定制了我的滚动条

::-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获得默认滚动条的此功能？

试试以下方法：

CSS:

HTML:

示例文本

@user3915432我会使用Firefox的

滚动条-

属性，因为这个答案只考虑webkit浏览器（即Chrome和Safari）。供参考：

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

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