自游互动这篇文章我们讲解一下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 定义右下角拖动块的样式