Barras de desplazamiento similares a Apple que usan CSS

Me he dado cuenta en algunos sitios de Apple como: http://help.apple.com/mobileme/index.html#mm5b08c671 tienen barras de desplazamiento personalizadas que usan el CSS de barra de desplazamiento WebKit que recientemente salió. Sin embargo, no puedo replicarlo en absoluto. ¿Alguna idea de como hacerlo? Tengo un sitio de prueba aquí pero obtengo las barras de desplazamiento predeterminadas? Gracias

Prueba: http://driz.co.uk/scrollbar/

El siguiente monstruo CSS es lo que Apple está usando:

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

::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-corner { background-image: url(http://sofes.miximages.com/css/FguQn.png?corner.png); background-repeat: no-repeat; } ::-webkit-resizer { background-image: url(http://sofes.miximages.com/css/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://sofes.miximages.com/css/NQ2K6.png?horizontal-button.png) 0 2 0 2; border-color: transparent; border-width: 0 2px; background-image: url(http://sofes.miximages.com/css/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://sofes.miximages.com/css/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://sofes.miximages.com/css/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://sofes.miximages.com/css/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://sofes.miximages.com/css/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://sofes.miximages.com/css/dGOKL.png?horizontal-decrement-arrow.png), url(http://sofes.miximages.com/css/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://sofes.miximages.com/css/gT5BM.png?horizontal-button-active.png) 0 2 0 2; background-image: url(http://sofes.miximages.com/css/dGOKL.png?horizontal-decrement-arrow.png), url(http://sofes.miximages.com/css/RDf8L.png?horizontal-button-background-active.png); } ::-webkit-scrollbar-button:horizontal:increment { background-image: url(http://sofes.miximages.com/css/5rJr5.png?horizontal-increment-arrow.png), url(http://sofes.miximages.com/css/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://sofes.miximages.com/css/gT5BM.png?horizontal-button-active.png) 0 2 0 2; background-image: url(http://sofes.miximages.com/css/5rJr5.png?horizontal-increment-arrow.png), url(http://sofes.miximages.com/css/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://sofes.miximages.com/css/NdaTT.png?vertical-button.png) 2 0 2 0; border-color: transparent; border-width: 2px 0; background-image: url(http://sofes.miximages.com/css/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://sofes.miximages.com/css/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://sofes.miximages.com/css/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://sofes.miximages.com/css/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://sofes.miximages.com/css/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://sofes.miximages.com/css/KQvwk.png?vertical-decrement-arrow.png), url(http://sofes.miximages.com/css/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://sofes.miximages.com/css/uW3TL.png?vertical-button-active.png) 2 0 2 0; background-image: url(http://sofes.miximages.com/css/KQvwk.png?vertical-decrement-arrow.png), url(http://sofes.miximages.com/css/puDsH.png?vertical-button-background-active.png); } ::-webkit-scrollbar-button:vertical:increment { background-image: url(http://sofes.miximages.com/css/UjkVR.png?vertical-increment-arrow.png), url(http://sofes.miximages.com/css/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://sofes.miximages.com/css/uW3TL.png?vertical-button-active.png) 2 0 2 0; background-image: url(http://sofes.miximages.com/css/UjkVR.png?vertical-increment-arrow.png), url(http://sofes.miximages.com/css/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; } 

Algunas publicaciones de blog útiles:

Intereting Posts