Webkit滚动条在大多数浏览器上不支持。

CHROME上的支持

这是一个webkit scrollbar demo 如果你正在寻找更多的例子，请检查这个更多的例子

另一种方法是Jquery滚动条插件

它支持所有浏览器，易于应用

从这里下载插件 如何使用和更多的选项检查这个

DEMO

.className::-webkit-scrollbar {
  width: 10px;
  background-color: rgba(0,0,0,0);
}

.className::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}

给了我一个漂亮的手机。

请检查这个链接。带有工作演示的示例

   #style-1::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
}

CSS滚动条

对于使用sass的人来说，这里是一个具有基本功能(拇指，轨道颜色和宽度)的mixin。我没有广泛地测试它，所以请随意指出任何错误。

@mixin element-scrollbar($thumb-color, $background-color: mix($thumb-color, white,  50%), $width: 1rem) {
  // For Webkit
  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
  }

  &::-webkit-scrollbar-track {
    background: $background-color;
  }

  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }

  // For Internet Explorer
  & {
    scrollbar-face-color: $thumb-color;
    scrollbar-arrow-color: $thumb-color;
    scrollbar-track-color: $background-color;
  }

  // For Firefox future compatibility
  // This is W3C draft and does not work yet. Use html-firefox-scrollbar mixin instead.
  & {
    scrollbar-color: $thumb-color $background-color;
    scrollbar-width: $width;
  }
}

// For Firefox
@mixin html-firefox-scrollbar($thumb-color, $background-color: mix($thumb-color, white,  50%), $firefox-width: this) {
  // This must be used on html/:root element to take effect
  & {
    scrollbar-color: $thumb-color $background-color;
    scrollbar-width: $firefox-width;
  }
}

我尝试了很多JS和CSS滚动，我发现这很容易使用，并在IE、Safari和FF上进行了测试，效果很好

正如@ theblufox所言

下面是它的工作原理

将下面的脚本添加到

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script>

<script type="text/javascript" src="facescroll.js"></script>

<script type="text/javascript">
    jQuery(function(){ // on page DOM load
        $('#demo1').alternateScroll();
        $('#demo2').alternateScroll({ 'vertical-bar-class': 'styled-v-bar', 'hide-bars': false });  
    })
</script>

在这段你需要滚动的地方

<div id="demo1" style="width:300px; height:250px; padding:8px; resize:both; overflow:scroll">
**Your Paragraph Comes Here**
</div>

更多细节请访问插件页面

FaceScroll自定义滚动条

希望能有所帮助

我尝试了很多插件，他们中的大多数不支持所有的浏览器，我更喜欢iScroll和nanoScroller适用于所有这些浏览器:

Ie11 -> ie6 Ie10 - wp8 Ie9 - wp7 IE Xbox One IE Xbox 360 谷歌Chrome 火狐 歌剧 Safari

但iScroll不工作与触摸!

demo iScroll: http://lab.cubiq.org/iscroll/examples/simple/ 演示nanoScroller: http://jamesflorentino.github.io/nanoScrollerJS/