CSS 滚动条样式

CSS3 设置滚动条主要有下面七个属性：

可以全局设置，也可以对单个div进行设置

/* 滚动条整体部分，可以设置宽度等 */
body::-webkit-scrollbar{


     }
/* 滚动条两端的按钮 */
body::-webkit-scrollbar-button{


     }
/* 外层轨道 */
body::-webkit-scrollbar-track{


     }
/* 内层滚动槽 */
body::-webkit-scrollbar-track-piece{


     }
/* 滚动的滑块 */
body::-webkit-scrollbar-thumb{


     }
/* 边角 */
body::-webkit-scrollbar-corner{


     }
/* 定义右下角拖动块的样式 */
body::-webkit-resizer{


     }

例如可以按照下面直接设置

/* 设置滚动条的样式 */
::-webkit-scrollbar {



width: 5px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {



border-radius: 10px;
background: rgba(117, 146, 168, 1);
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}

/* 内层滚动槽 */
::-webkit-scrollbar-track-piece {



width: 2px;
background: rgba(30, 52, 68, 1);
}

其他的就自己测试吧。