内容分类

给网站定义一个自己的滚动条

2023年05月26日 22:39 610
网站是可以通过设置css来重新定义滚动条样式的,下面就介绍下怎么定义一个自己的滚动条

一段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);}

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


用户评论
0条评论
  • 疯狂的菜鸟 Lv.1 vip svip
    1 0
    23-05-26 10:54
    中文在文件中容易乱码,使用的时候去掉中文就好了
    0 0 投诉 回复
站长
vip svip Lv.1
投诉 1 1