试试吧

来源:https://nicescroll.areaaperta.com/

简单的实现

<script type="text/javascript">
 $(document).ready(

  function() { 

    $("html").niceScroll();

  }

);
</script>

它是一个jQuery插件滚动条，所以你的滚动条是可控的，在不同的操作系统上看起来是一样的。

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

CHROME上的支持

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

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

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

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

DEMO

下面是一个适用于Chrome和Safari的webkit示例:

CSS:

::-webkit-scrollbar 
{
    width: 40px;
    background-color:#4F4F4F;
}

::-webkit-scrollbar-button:vertical:increment 
{
    height:40px;
    background-image: url(/Images/Scrollbar/decrement.png);
    background-size:39px 30px;
    background-repeat:no-repeat;
}

::-webkit-scrollbar-button:vertical:decrement 
{
    height:40px;
    background-image: url(/Images/Scrollbar/increment.png);    
    background-size:39px 30px;
    background-repeat:no-repeat;
}

输出:

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

有一种方法可以将自定义滚动条应用于HTML文档中的自定义div元素。这里有一个有用的例子。https://codepen.io/adeelibr/pen/dKqZNb但作为一个要点。你可以这样做。

<div class="scrollbar" id="style-1">
  <div class="force-overflow"></div>
</div>

CSS文件是这样的。

.scrollbar
{
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px;
}

.force-overflow
{
  min-height: 450px;
}

#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;
}

这是谷歌在它的一些应用程序中使用了很长时间的方法。在代码中看到，如果你应用下一个类，他们以某种方式隐藏滚动条在Chrome，但它仍然工作。

这些类是jfk-scrollbar、jfk-scrollbar-borderless和jfk-scrollbar-dark

.testg{ border:1px solid black; max-height:150px; overflow-y: scroll; overflow-x: hidden; width: 250px;} .content{ height: 700px} /* The google css code for scrollbars */ ::-webkit-scrollbar { height: 16px; overflow: visible; width: 16px } ::-webkit-scrollbar-button { height: 0; width: 0 } ::-webkit-scrollbar-track { background-clip: padding-box; border: solid transparent; border-width: 0 0 0 7px } ::-webkit-scrollbar-track:horizontal { border-width: 7px 0 0 } ::-webkit-scrollbar-track:hover { background-color: rgba(0, 0, 0, .05); box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1) } ::-webkit-scrollbar-track:horizontal:hover { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1) } ::-webkit-scrollbar-track:active { background-color: rgba(0, 0, 0, .05); box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07) } ::-webkit-scrollbar-track:horizontal:active { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07) } .jfk-scrollbar-dark::-webkit-scrollbar-track:hover { background-color: rgba(255, 255, 255, .1); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2) } .jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) } .jfk-scrollbar-dark::-webkit-scrollbar-track:active { background-color: rgba(255, 255, 255, .1); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15) } .jfk-scrollbar-dark::-webkit-scrollbar-track:horizontal:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15) } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .2); background-clip: padding-box; border: solid transparent; border-width: 0 0 0 7px; min-height: 28px; padding: 100px 0 0; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07) } ::-webkit-scrollbar-thumb:horizontal { border-width: 7px 0 0; padding: 0 0 0 100px; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07) } ::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, .4); box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25) } ::-webkit-scrollbar-thumb:active { background-color: rgba(0, 0, 0, 0.5); box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35) } .jfk-scrollbar-dark::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .3); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1) } .jfk-scrollbar-dark::-webkit-scrollbar-thumb:horizontal { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1) } .jfk-scrollbar-dark::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .6); box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37) } .jfk-scrollbar-dark::-webkit-scrollbar-thumb:active { background-color: rgba(255, 255, 255, .75); box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5) } .jfk-scrollbar-borderless::-webkit-scrollbar-track { border-width: 0 1px 0 6px } .jfk-scrollbar-borderless::-webkit-scrollbar-track:horizontal { border-width: 6px 0 1px } .jfk-scrollbar-borderless::-webkit-scrollbar-track:hover { background-color: rgba(0, 0, 0, .035); box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07) } .jfk-scrollbar-borderless.jfk-scrollbar-dark::-webkit-scrollbar-track:hover { background-color: rgba(255, 255, 255, .07); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15) } .jfk-scrollbar-borderless::-webkit-scrollbar-thumb { border-width: 0 1px 0 6px } .jfk-scrollbar-borderless::-webkit-scrollbar-thumb:horizontal { border-width: 6px 0 1px } ::-webkit-scrollbar-corner { background: transparent } body::-webkit-scrollbar-track-piece { background-clip: padding-box; background-color: #f5f5f5; border: solid #fff; border-width: 0 0 0 3px; box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07) } body::-webkit-scrollbar-track-piece:horizontal { border-width: 3px 0 0; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07) } body::-webkit-scrollbar-thumb { border-width: 1px 1px 1px 5px } body::-webkit-scrollbar-thumb:horizontal { border-width: 5px 1px 1px } body::-webkit-scrollbar-corner { background-clip: padding-box; background-color: #f5f5f5; border: solid #fff; border-width: 3px 0 0 3px; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14) } .jfk-scrollbar::-webkit-scrollbar { height: 16px; overflow: visible; width: 16px } .jfk-scrollbar::-webkit-scrollbar-button { height: 0; width: 0 } .jfk-scrollbar::-webkit-scrollbar-track { background-clip: padding-box; border: solid transparent; border-width: 0 0 0 7px } .jfk-scrollbar::-webkit-scrollbar-track:horizontal { border-width: 7px 0 0 } .jfk-scrollbar::-webkit-scrollbar-track:hover { background-color: rgba(0, 0, 0, .05); box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1) } .jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1) } .jfk-scrollbar::-webkit-scrollbar-track:active { background-color: rgba(0, 0, 0, .05); box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07) } .jfk-scrollbar::-webkit-scrollbar-track:horizontal:active { box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07) } .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover { background-color: rgba(255, 255, 255, .1); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .2) } .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2) } .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:active { background-color: rgba(255, 255, 255, .1); box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25), inset -1px 0 0 rgba(255, 255, 255, .15) } .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:horizontal:active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(255, 255, 255, .15) } .jfk-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, .2); background-clip: padding-box; border: solid transparent; border-width: 0 0 0 7px; min-height: 28px; padding: 100px 0 0; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07) } .jfk-scrollbar::-webkit-scrollbar-thumb:horizontal { border-width: 7px 0 0; padding: 0 0 0 100px; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07) } .jfk-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, .4); box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25) } .jfk-scrollbar::-webkit-scrollbar-thumb:active { background-color: rgba(0, 0, 0, 0.5); box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35) } .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .3); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .1) } .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .15), inset -1px 0 0 rgba(255, 255, 255, .1) } .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .6); box-shadow: inset 1px 1px 1px rgba(255, 255, 255, .37) } .jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-thumb:active { background-color: rgba(255, 255, 255, .75); box-shadow: inset 1px 1px 3px rgba(255, 255, 255, .5) } .jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track { border-width: 0 1px 0 6px } .jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:horizontal { border-width: 6px 0 1px } .jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-track:hover { background-color: rgba(0, 0, 0, .035); box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14), inset -1px -1px 0 rgba(0, 0, 0, .07) } .jfk-scrollbar-borderless.jfk-scrollbar-dark.jfk-scrollbar::-webkit-scrollbar-track:hover { background-color: rgba(255, 255, 255, .07); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .25), inset -1px -1px 0 rgba(255, 255, 255, .15) } .jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb { border-width: 0 1px 0 6px } .jfk-scrollbar-borderless.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal { border-width: 6px 0 1px } .jfk-scrollbar::-webkit-scrollbar-corner { background: transparent } body.jfk-scrollbar::-webkit-scrollbar-track-piece { background-clip: padding-box; background-color: #f5f5f5; border: solid #fff; border-width: 0 0 0 3px; box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07) } body.jfk-scrollbar::-webkit-scrollbar-track-piece:horizontal { border-width: 3px 0 0; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07) } body.jfk-scrollbar::-webkit-scrollbar-thumb { border-width: 1px 1px 1px 5px } body.jfk-scrollbar::-webkit-scrollbar-thumb:horizontal { border-width: 5px 1px 1px } body.jfk-scrollbar::-webkit-scrollbar-corner { background-clip: padding-box; background-color: #f5f5f5; border: solid #fff; border-width: 3px 0 0 3px; box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14) } <div class="testg"> <div class="content"> Look Ma' my scrollbars doesn't have arrows <br /><br /> content, content, content <br /> content, content, content <br /> content, content, content s<br /> content, content, content <br/> content, content, content <br/> content, content, content d<br/> content, content, content <br/> </div> </div> <br/> <div class="testg jfk-scrollbar jfk-scrollbar-borderless jfk-scrollbar-dark"> <div class="content"> Look Ma' my scrollbars dissapear in chrome<br /><br /> content, content, content <br /> content, content, content <br /> content, content, content s<br /> content, content, content <br/> content, content, content <br/> content, content, content d<br/> content, content, content <br/> </div> </div>

http://jsfiddle.net/76kcuem0/32/

我发现从滚动条中移除箭头很有用。截至2015年，它被用于谷歌地图在其材料设计UI的结果列表中搜索位置。