这篇文章我们讲解一下css修改滚轴的样式
先看效果图:
上代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> /*普通滚轴样式*/ .box { width: 200px; height: 50px; overflow-x: auto; } .box .content { width: 500px; height: 10px; } /*横向滚轴样式*/ .box1 { width: 200px; height: 50px; overflow-x: auto; } .box1 .content { width: 500px; height: 10px; } .box1::-webkit-scrollbar { height: 10px; } /*滚轴宽度*/ .box1::-webkit-scrollbar-track { background: #CCCCCC; } /*背景颜色*/ .box1::-webkit-scrollbar-thumb { border-radius: 4rem; background: #1CB15C; } /*滚轴颜色*/ /*纵向滚轴样式*/ .box2 { width: 200px; height: 200px; overflow-y: auto; } .box2 .content { width: 100px; height: 500px; } .box2::-webkit-scrollbar { width: 10px; } .box2::-webkit-scrollbar-track { background: #70859a; } .box2::-webkit-scrollbar-thumb { border-radius: 4rem; background: #eca97b; } </style> </head> <body> <div class="box"> <div class="content">普通滚轴</div> </div> <div class="box1"> <div class="content">横向滚轴</div> </div> <br /> <br /><br /> <div class="box2"> <div class="content">纵向滚轴</div> </div> </body> </html>
下面就讲解滚动条几个属性,主要有下面7个属性
- ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
- ::-webkit-scrollbar-button 滚动条两端的按钮
- ::-webkit-scrollbar-track 外层轨道
- ::-webkit-scrollbar-track-piece 内层滚动槽
- ::-webkit-scrollbar-thumb 滚动的滑块
- ::-webkit-scrollbar-corner 边角
- ::-webkit-resizer 定义右下角拖动块的样式