修改浏览器默认滚动条样式-属性自定义

滚动条各个属性说明

::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。

::-webkit-scrollbar-thumb ：滚动条里面可以拖动的滑块

::-webkit-scrollbar-track ：外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

::-webkit-scrollbar-track-piece ：内层轨道，需要注意的就是它会覆盖第三个属性的样式。

::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。

::-webkit-scrollbar-corner ：边角，两个滚动条交汇处

::-webkit-resizer ：两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上）

注意：一般使用前三个即可达到修改滚动条样式，css如下, 各项均可修改：

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    
    
    width: 10px; /*对垂直滚动条有效*/
    height: 10px;  /*对水平滚动条有效*/
}
 
/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
    
    
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #ececec;
    border-radius: 3px;
}
 
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
    
    
    border-radius: 7px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: rgba(0, 0, 0, .1);
}
 
/* 光标移到滚动滑块上样式颜色变深 */
::-webkit-scrollbar-thumb:hover {
    
    
    background-color: rgba(0, 0, 0, .2);
}
 
/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
    
    
    background-color: cyan;
}
 
/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
    
    
    background: khaki;
}

修改后滚动条效果：