[分享]给网站定义一个自己的滚动条

一段css代码就可以给网站定义一个自己的滚动条

直接贴代码

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{width:8px;height:8px;}
/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.1);background:rgba(100,100,100,0.2);}
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.1);background:rgba(0,0,0,0.3);}
::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.2);background:rgba(0,0,0,0.6);}
/*定义两端按钮的样式*/
::-webkit-scrollbar-button{background:rgba(0,0,0,0.6);width:0;height:0;}
/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner{background:rgba(0,0,0,0.6);}
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar{width:8px;height:8px;}
/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.1);background:rgba(100,100,100,0.2);}
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.1);background:rgba(0,0,0,0.3);}
::-webkit-scrollbar-thumb:hover{-webkit-box-shadow:inset 0 0 1px rgba(0,0,0,0.2);background:rgba(0,0,0,0.6);}
/*定义两端按钮的样式*/
::-webkit-scrollbar-button{background:rgba(0,0,0,0.6);width:0;height:0;}
/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner{background:rgba(0,0,0,0.6);}

具体样式可以根据自己的实际需求来改动