假设div为

<div class="custom_scroll"> ... </div>

应用CSS样式为

//custom scroll style definitions
.custom_scroll
{
  overflow-y: scroll;
}

//custom_scroll scrollbar styling
.custom_scroll::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

.custom_scroll::-webkit-scrollbar
{
    width: 5px;
    opacity: 0.5;
    //background-color: #F5F5F5;
}

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

产生的滚动将显示为

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

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

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

输出:

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的结果列表中搜索位置。

在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