CSS自定义滚动条样式

主要参考了这一篇文章----->传送门

一般需求主要对三个滚动条的属性进行修改。

滚动条轨道

::-webkit-scrollbar-track {
     
    /* 阴影 */
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    /* 圆角 */
    border-radius: 5px;
    /* 背景颜色 */
    background-color: #F5F5F5;
}

滑块

::-webkit-scrollbar-thumb {
     
	/* 滑块的圆角 */
    border-radius: 5px;
    /* 内阴影 */
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

滚动条

::-webkit-scrollbar {
     
    /* 竖向滚动条的尺寸 */
    width: 6px;
    /* 横向滚动条的尺寸 */
    height: 6px;
    /* 背景颜色 */
    background-color: #F5F5F5;
}