Webkit浏览器(如Chrome, Safari和Opera)支持非标准的::-webkit-scrollbar伪元素，它允许我们修改浏览器滚动条的外观。

注意:Firefox、IE和Edge不支持::-webkit-scrollbar。

* { box-sizing: border-box; font-family: sans-serif; } div { width: 15rem; height: 8rem; padding: .5rem; border: 1px solid #aaa; margin-bottom: 1rem; overflow: auto; } .box::-webkit-scrollbar { width: .8em; } .box::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); } .box::-webkit-scrollbar-thumb { background-color: dodgerblue; } <div class="box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> </div>

参考: 如何创建自定义滚动条

这是谷歌在它的一些应用程序中使用了很长时间的方法。在代码中看到，如果你应用下一个类，他们以某种方式隐藏滚动条在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的结果列表中搜索位置。

Webkit浏览器(如Chrome, Safari和Opera)支持非标准的::-webkit-scrollbar伪元素，它允许我们修改浏览器滚动条的外观。

注意:Firefox、IE和Edge不支持::-webkit-scrollbar。

* { box-sizing: border-box; font-family: sans-serif; } div { width: 15rem; height: 8rem; padding: .5rem; border: 1px solid #aaa; margin-bottom: 1rem; overflow: auto; } .box::-webkit-scrollbar { width: .8em; } .box::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); } .box::-webkit-scrollbar-thumb { background-color: dodgerblue; } <div class="box"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> </div> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate</p> </div>

参考: 如何创建自定义滚动条

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

给了我一个漂亮的手机。

在Firefox +64中只使用CSS

.mycoldiv{
    scrollbar-color: white rebeccapurple;
    scrollbar-width: thin;
    display: block;
    height:400px;
    overflow-x: auto;
}

更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars

试试吧

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

简单的实现

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

  function() { 

    $("html").niceScroll();

  }

);
</script>

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