欢迎光临
我们一直在努力

css修改滚轴的样式

这篇文章我们讲解一下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个属性

  1. ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的
  2. ::-webkit-scrollbar-button 滚动条两端的按钮
  3. ::-webkit-scrollbar-track  外层轨道
  4. ::-webkit-scrollbar-track-piece  内层滚动槽
  5. ::-webkit-scrollbar-thumb 滚动的滑块
  6. ::-webkit-scrollbar-corner 边角
  7. ::-webkit-resizer 定义右下角拖动块的样式

 

赞(0)
未经允许不得转载:自游互动 » css修改滚轴的样式
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们