关灯
开启左侧

自定义滚动条

[复制链接]
doubleyong 发表于 2018-12-24 12:49:44 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
在实际工作中很多默认样式不够美观,因此我们需要对默认样式进行更改,这里讲一下如何自定义滚动条。

首先分析一下滚动条的构成:分为整体的滚动条样式、滚动条的滑轨、滚动条的滑块。这三部分在CSS中的代码就分别是:-webkit-scrollbar、-webkit-scrollbar-thumb、-webkit-scrollbar-track。

接下来是demo的代码:

  1. <div class="content content-1">
  2.         <div class="main"></div>
  3.     </div>
复制代码
  1. .content {
  2.             width: 50px;
  3.             height: 200px;
  4.             overflow: auto;
  5.             float: left;
  6.             margin: 5px;
  7.             border: none;
  8.         }
  9.         
  10.         .main {
  11.             width: 30px;
  12.             height: 300px;
  13.             margin: 0 auto;
  14.         }
  15.         
  16.         .content-1::-webkit-scrollbar {
  17.             /*滚动条整体样式*/
  18.             width: 10px;
  19.             /*高宽分别对应横竖滚动条的尺寸*/
  20.             height: 1px;
  21.         }
  22.         
  23.         .content-1::-webkit-scrollbar-thumb {
  24.             /*滚动条里面小方块*/
  25.             border-radius: 10px;
  26.             -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  27.             background: #535353;
  28.         }
  29.         
  30.         .content-1::-webkit-scrollbar-track {
  31.             /*滚动条里面轨道*/
  32.             -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  33.             border-radius: 10px;
  34.             background: #EDEDED;
  35.         }
复制代码
转自:http://bugshouji.com/shareweb/t646

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-9988-316

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )