使用CSS的蘋果式滾動條

Question

我注意到在一些蘋果網站上，例如：http://help.apple.com/mobileme/index.html#mm5b08c671他們使用最近出現的WebKit滾動條CSS自定義滾動條。但是我根本無法複製它。任何想法如何做到這一點？我在這裏有一個測試網站，但我得到了默認的滾動條？由於

測試：http://driz.co.uk/scrollbar/

Answer 1

下面的CSS怪物就是蘋果採用：

http://jsfiddle.net/thirtydot/kTsUc/886/

::-webkit-scrollbar { 
    width: 15px; 
    height: 15px; 
} 
::-webkit-scrollbar-corner { 
    background-image: url(http://i.stack.imgur.com/FguQn.png?corner.png); 
    background-repeat: no-repeat; 
} 
::-webkit-resizer { 
    background-image: url(http://i.stack.imgur.com/aKKDY.png?resizer.png); 
    background-repeat: no-repeat; 
    background-position: bottom right; 
} 
::-webkit-scrollbar-button:start { 
    display: none; 
} 
::-webkit-scrollbar-button:end { 
    display: block; 
} 
::-webkit-scrollbar:horizontal { 
    -webkit-border-image: url(http://i.stack.imgur.com/NQ2K6.png?horizontal-button.png) 0 2 0 2; 
    border-color: transparent; 
    border-width: 0 2px; 
    background-image: url(http://i.stack.imgur.com/8xDbU.png?horizontal-button-background.png); 
    background-repeat: repeat-x; 
} 
::-webkit-scrollbar:horizontal:corner-present { 
    border-right-width: 0; 
} 
::-webkit-scrollbar-thumb:horizontal { 
    -webkit-border-image: url(http://i.stack.imgur.com/YQRD7.png?horizontal-thumb.png) 0 15 0 15; 
    border-color: transparent; 
    border-width: 0 15px; 
    min-width: 20px; 
} 
::-webkit-scrollbar-track-piece:horizontal:start { 
    margin-left: 6px; 
} 
::-webkit-scrollbar-track-piece:horizontal:end { 
    margin-right: -6px; 
} 
::-webkit-scrollbar-track-piece:horizontal:decrement { 
    -webkit-border-image: url(http://i.stack.imgur.com/p9yMk.png?horizontal-track.png) 0 15 0 15; 
    border-color: transparent; 
    border-width: 0 0 0 15px; 
} 
::-webkit-scrollbar-track-piece:horizontal:increment { 
    -webkit-border-image: url(http://i.stack.imgur.com/p9yMk.png?horizontal-track.png) 0 15 0 15; 
    border-color: transparent; 
    border-width: 0 15px 0 0; 
} 
::-webkit-scrollbar-button:horizontal { 
    width: 21px; 
    -webkit-border-image: url(http://i.stack.imgur.com/NQ2K6.png?horizontal-button.png) 0 2 0 2; 
    border-color: transparent; 
    border-width: 0 2px; 
} 
::-webkit-scrollbar-button:horizontal:decrement { 
    background-image: url(http://i.stack.imgur.com/dGOKL.png?horizontal-decrement-arrow.png), url(http://i.stack.imgur.com/8xDbU.png?horizontal-button-background.png); 
    background-repeat: no-repeat, repeat-x; 
    background-position: 7px 4px, 0 0; 
} 
::-webkit-scrollbar-button:horizontal:decrement:active { 
    -webkit-border-image: url(http://i.stack.imgur.com/gT5BM.png?horizontal-button-active.png) 0 2 0 2; 
    background-image: url(http://i.stack.imgur.com/dGOKL.png?horizontal-decrement-arrow.png), url(http://i.stack.imgur.com/RDf8L.png?horizontal-button-background-active.png); 
} 
::-webkit-scrollbar-button:horizontal:increment { 
    background-image: url(http://i.stack.imgur.com/5rJr5.png?horizontal-increment-arrow.png), url(http://i.stack.imgur.com/8xDbU.png?horizontal-button-background.png); 
    background-repeat: no-repeat, repeat-x; 
    width: 16px; 
    border-left-width: 0; 
    background-position: 3px 4px, 0 0; 
} 
::-webkit-scrollbar-button:horizontal:increment:active { 
    -webkit-border-image: url(http://i.stack.imgur.com/gT5BM.png?horizontal-button-active.png) 0 2 0 2; 
    background-image: url(http://i.stack.imgur.com/5rJr5.png?horizontal-increment-arrow.png), url(http://i.stack.imgur.com/RDf8L.png?horizontal-button-background-active.png); 
} 
::-webkit-scrollbar-button:horizontal:end:increment:corner-present { 
    border-right-width: 0; 
    width: 15px; 
} 
::-webkit-scrollbar:vertical { 
    -webkit-border-image: url(http://i.stack.imgur.com/NdaTT.png?vertical-button.png) 2 0 2 0; 
    border-color: transparent; 
    border-width: 2px 0; 
    background-image: url(http://i.stack.imgur.com/p7j9a.png?vertical-button-background.png); 
    background-repeat: repeat-y; 
} 
::-webkit-scrollbar:vertical:corner-present { 
    border-bottom-width: 0; 
} 
::-webkit-scrollbar-thumb:vertical { 
    -webkit-border-image: url(http://i.stack.imgur.com/rPEsZ.png?vertical-thumb.png) 15 0 15 0; 
    border-color: transparent; 
    border-width: 15px 0; 
    min-height: 20px; 
} 
::-webkit-scrollbar-track-piece:vertical:start { 
    margin-top: 6px; 
} 
::-webkit-scrollbar-track-piece:vertical:end { 
    margin-bottom: -6px; 
} 
::-webkit-scrollbar-track-piece:vertical:decrement { 
    -webkit-border-image: url(http://i.stack.imgur.com/Rb6ru.png?vertical-track.png) 15 0 15 0; 
    border-color: transparent; 
    border-width: 15px 0 0 0; 
} 
::-webkit-scrollbar-track-piece:vertical:increment { 
    -webkit-border-image: url(http://i.stack.imgur.com/Rb6ru.png?vertical-track.png) 15 0 15 0; 
    border-color: transparent; 
    border-width: 0 0 15px 0; 
} 
::-webkit-scrollbar-button:vertical { 
    height: 21px; 
    -webkit-border-image: url(http://i.stack.imgur.com/NdaTT.png?vertical-button.png) 2 0 2 0; 
    border-color: transparent; 
    border-width: 2px 0; 
} 
::-webkit-scrollbar-button:vertical:decrement { 
    background-image: url(http://i.stack.imgur.com/KQvwk.png?vertical-decrement-arrow.png), url(http://i.stack.imgur.com/p7j9a.png?vertical-button-background.png); 
    background-repeat: no-repeat, repeat-y; 
    background-position: 4px 7px, 0 0; 
} 
::-webkit-scrollbar-button:vertical:decrement:active { 
    -webkit-border-image: url(http://i.stack.imgur.com/uW3TL.png?vertical-button-active.png) 2 0 2 0; 
    background-image: url(http://i.stack.imgur.com/KQvwk.png?vertical-decrement-arrow.png), url(http://i.stack.imgur.com/puDsH.png?vertical-button-background-active.png); 
} 
::-webkit-scrollbar-button:vertical:increment { 
    background-image: url(http://i.stack.imgur.com/UjkVR.png?vertical-increment-arrow.png), url(http://i.stack.imgur.com/p7j9a.png?vertical-button-background.png); 
    background-repeat: no-repeat, repeat-y; 
    height: 16px; 
    border-top-width: 0; 
    background-position: 4px 5px, 0 0; 
} 
::-webkit-scrollbar-button:vertical:increment:active { 
    -webkit-border-image: url(http://i.stack.imgur.com/uW3TL.png?vertical-button-active.png) 2 0 2 0; 
    background-image: url(http://i.stack.imgur.com/UjkVR.png?vertical-increment-arrow.png), url(http://i.stack.imgur.com/puDsH.png?vertical-button-background-active.png); 
} 
::-webkit-scrollbar-button:vertical:end:increment:corner-present { 
    border-bottom-width: 0; 
    height: 15px; 
} 
::-webkit-scrollbar:disabled { 
    background: red; 
    -webkit-border-image: none; 
    display: none; 
} 

一些有用的博客文章：

• http://webkit.org/blog/363/styling-scrollbars/
• http://web.archive.org/web/20120115134443/http://numerosign.com/notebook/styling-webkit-scrollbars-with-css3/
• http://almaer.com/blog/creating-custom-scrollbars-with-css-how-css-isnt-great-for-every-task