Question

如何自定义浏览器的滚动条样式

Answer 1

主要定义几个scrollbar的CSS样式即可，

下面是小乐图客（一个Chrome浏览器图片下载扩展）的绿色滚动条，CSS代码

::-webkit-scrollbar{
color:white;
background-color:white;
    width:10px;
height:10px;
-webkit-box-shadow:2px 2px 6px rgba(0,0,0,.2) inset;
}
::-webkit-scrollbar-thumb{
    border-radius:16px;
background:-webkit-linear-gradient(white, #a2c347 50%, white);
-webkit-box-shadow:2px 2px 6px rgba(0,0,0,.5),inset -2px 2px 2px rgba(204,204,204,0.1),inset 2px -2px 2px rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:hover{
background:-webkit-linear-gradient(#a2c347, white 50%, #a2c347);
}
::-webkit-scrollbar-thumb:active{
background:-webkit-linear-gradient(#a2c347, #a2c347);
}