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

   #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滚动条

我尝试了很多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自定义滚动条

希望能有所帮助

对于使用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;
  }
}

我尝试了很多插件，他们中的大多数不支持所有的浏览器，我更喜欢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/

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

CHROME上的支持

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

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

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

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

DEMO

Firefox新版本(64)支持CSS滚动条模块级别1

.scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-color: rebeccapurple green; scrollbar-width: thin; } <div class="scroller"> Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini. </div>

来源:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

https://codepen.io/fatihhayri/pen/pqdrbd