本文共 921 字,大约阅读时间需要 3 分钟。
如图红框里的滚动条,设置长度和宽度,以及背景颜色和滚动条颜色
chrome css 样式设置
/* 滚动条样式 .wrap为滚动盒子的class*//* chrome */ .wrap::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px;}.wrap::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 4px; background: #A1A1A1;}.wrap::-webkit-scrollbar-track { /*滚动条里面轨道*/ border-radius: 4px; background: #F9F9F9; margin: 30px 0;}
ie 浏览器样式
/* ie */.wrap{ scrollbar-arrow-color: #A1A1A1; /**//*三角箭头的颜色*/ scrollbar-face-color: #A1A1A1; /**//*立体滚动条的颜色*/ scrollbar-3dlight-color: transparent; /**//*立体滚动条亮边的颜色*/ scrollbar-highlight-color: transparent; /**//*滚动条空白部分的颜色*/ scrollbar-shadow-color: transparent; /**//*立体滚动条阴影的颜色*/ scrollbar-darkshadow-color: transparent; /**//*立体滚动条强阴影的颜色*/ scrollbar-track-color: #F9F9F9; /**//*立体滚动条背景颜色*/ scrollbar-base-color: transparent; /**//*滚动条的基本颜色*/}
火狐浏览器目前没有找到兼容的样式