使用 CSS 的类似 Apple 的滚动条

Question

我注意到一些苹果网站，例如： http://help.apple.com/mobileme/ index.html#mm5b08c671 他们有使用最近出现的 WebKit 滚动条 CSS 内容的自定义滚动条。然而我根本无法复制它。有什么想法如何去做吗？我这里有一个测试站点，但我得到了默认的滚动条？感谢

测试：http://driz.co.uk/scrollbar/

Answer 1

Apple 使用的是以下 CSS 怪物：

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

<div style="width:1000px; height:1000px">
    Hi scrollbar!
</div>

一些有用的博客文章：

• 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