自定義滾動條樣式，隱藏條，除非滾動

Question

我想要Windows瀏覽器上MAC滾動條的功能。

目前，代碼始終在MAC上顯示該條，理想情況下，我希望滾動條僅在您實際滾動時才可見，而不是一直在那兒顯示。

::-webkit-scrollbar {
    width: 8px;
}

 /* Track */
  ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
 }

 /* Handle */
::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

 ::-webkit-scrollbar-thumb:window-inactive {
   background: rgba(255,0,0,0.4); 
}

有任何想法嗎？

Answer 1

這不是簡單的純CSS跨瀏覽器解決方案。

您應該為此使用javascript庫，建議您使用nicescroll：
http://areaaperta.com/nicescroll/

或進行更多自定義，請使用jscrollpane：
http://jscrollpane.kelvinluck.com/