我已经注意到一些苹果网站,如：
http://help.apple.com/mobileme/index.html#mm5b08c671他们有使用最近出来的WebKit滚动条CSS东西的自定义滚动条.但是我无法复制它.有什么想法怎么办？我有一个测试网站在这里,但我得到默认滚动条？谢谢
解决方法
以下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),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),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
