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

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

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

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

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>

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

我认为整合滚动条、CSS和浏览器兼容性方面的最新信息会很有帮助。

CSS支持滚动条

目前，还不存在跨浏览器滚动条CSS样式定义。我在最后提到的W3C文章有以下声明，最近更新了(2014年10月10日):

一些浏览器(IE, Konqueror)支持'scrollbar-shadow-color'， 'scrollbar-track-color'等非标准属性。这些属性是非法的:它们既没有在任何CSS规范中定义，也没有被标记为专有属性(通过在它们前面加上“-vendor-”)。

微软

正如其他人提到的，微软支持滚动条样式，但仅限于IE8及以上版本。

例子:

.TA {
    scrollbar-3dlight-color:gold;
    scrollbar-arrow-color:blue;
    scrollbar-base-color:;
    scrollbar-darkshadow-color:blue;
    scrollbar-face-color:;
    scrollbar-highlight-color:;
    scrollbar-shadow-color:
}

Chrome & Safari (WebKit)

同样，WebKit现在也有了自己的版本:

Styling scrollbars: https://www.webkit.org/blog/363/styling-scrollbars/ Demo of all WebKit scroll bar styling From Custom scrollbars in WebKit, relevant CSS: /* pseudo elements */ ::-webkit-scrollbar { } ::-webkit-scrollbar-button { } ::-webkit-scrollbar-track { } ::-webkit-scrollbar-track-piece { } ::-webkit-scrollbar-thumb { } ::-webkit-scrollbar-corner { } ::-webkit-resizer { } /* pseudo class selectors */ :horizontal :vertical :decrement :increment :start :end :double-button :single-button :no-button :corner-present :window-inactive

Firefox(壁虎)

从版本64开始，Firefox通过属性scrollbar-color(部分，W3C草案)和scrollbar-width (W3C草案)支持滚动条样式化。在这个答案中可以找到一些关于实现的有用信息。

跨浏览器滚动条样式

JavaScript库和插件可以提供跨浏览器的解决方案。有很多选择。

20 jQuery滚动条插件示例(2012年7月24日) NiceScroll: jQuery滚动插件桌面，移动和触摸设备 jQuery自定义内容滚动 一个轻量级的jQuery插件 等。 30+ JavaScript/Ajax技术用于滑块，滚动条和滚动条(2008年5月7日) 21实用的滚动条CSS/JavaScript样式教程(2012年8月) 15+免费和高级jQuery滚动插件(2012年8月26日)

这样的例子不胜枚举。最好的办法是到处搜索、研究和测试可用的解决方案。我相信你一定能找到符合你需要的工作。

防止非法滚动条样式

为了防止滚动条样式没有正确地加上前缀“-vendor”，W3C的这篇文章提供了一些基本说明。基本上，您需要将以下CSS添加到与浏览器关联的用户样式表中。这些定义将覆盖您访问的任何页面上无效的滚动条样式。

body, html {
  scrollbar-face-color: ThreeDFace !important;
  scrollbar-shadow-color: ThreeDDarkShadow !important;
  scrollbar-highlight-color: ThreeDHighlight !important;
  scrollbar-3dlight-color: ThreeDLightShadow !important;
  scrollbar-darkshadow-color: ThreeDDarkShadow !important;
  scrollbar-track-color: Scrollbar !important;
  scrollbar-arrow-color: ButtonText !important;
}

重复或相似的问题/上面没有链接的来源

改变滚动条的样式 CSS滚动条样式跨浏览器 如何在div上创建自定义滚动条(Facebook风格)

注意:这个答案包含了不同来源的信息。如果使用了一个源，那么它也会在这个答案中被链接。

下面是一个适用于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;
}

输出: