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

Question

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

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

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

这给了我一个很好的滚动条类似的默认浏览器滚动条，但花色有白（而不是一个黑色半透明）。

但是，当我这样做时，我失去了只有滚动条显示的属性，当我积极滚动div。

有没有办法让默认滚动条的功能只使用CSS？

Answer 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>