谷歌展示如图所示
代码:
/*滚动条整体部分,必须要设置*/
::-webkit-scrollbar{
width: 8px;
height: 8px;
background-color: transparent;
}
/*滚动条的轨道*/
::-webkit-scrollbar-track{
background-color: transparent;
}
/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb{
border-radius: 10px;
background-color: rgb(7,61,92);
box-shadow: inset 0 0 5px rgb(7,61,92);
}
/*滚动条的上下两端的按钮*/
::-webkit-scrollbar-button{
height: 0;
background-color: rgb(7,61,92);
}
// 两个滚动条的交汇处
::-webkit-scrollbar-corner{
background-color: transparent;
}
/* IE 浏览器 */
div{
/*三角箭头的颜色*/
scrollbar-arrow-color: rgb(7,61,92);
/*滚动条滑块按钮的颜色*/
scrollbar-face-color: rgb(7,61,92);
/*滚动条整体颜色*/
scrollbar-highlight-color: rgb(12,23,35);
/*滚动条阴影*/
scrollbar-shadow-color: transparent;
/*滚动条轨道颜色*/
scrollbar-track-color: transparent;
/*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
scrollbar-3dlight-color:rgb(7,61,92);
/*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
scrollbar-darkshadow-color: rgb(7,61,92);
/*滚动条基准颜色*/
scrollbar-base-color: rgb(7,61,92);
}