如何使滾動條在不活動滾動時消失？

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>