码迷,mamicode.com
首页 > 其他好文 > 详细

diy 滚动条 样式 ---- 核心代码

时间:2020-01-15 12:01:43      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:white   样式   ati   wrap   滚动   lin   isp   rgb   relative   

      .choice-tag {
               width: 341px;
               height: 30px;
               overflow: hidden;
               overflow-x: auto;
               white-space: nowrap;
               position: relative;
               z-index: 97;
               display: inline-block;
               margin: 4px 0 0 5px;

               /* diy 滚动条核心代码 */
               &::-webkit-scrollbar{  /*滚动条整体样式*/
                   width: 4px;   /*高宽分别对应横竖滚动条的尺寸*/
                   height: 4px;
               }

               &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
                   border-radius: 5px;
                   -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
                   background: rgba(255, 255, 255, 0.2);
               }

               &::-webkit-scrollbar-track { /*滚动条里面轨道*/
                   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
                   border-radius: 0;
                   background: rgba(0, 0, 0, 0.1);
               }
}

  

diy 滚动条 样式 ---- 核心代码

标签:white   样式   ati   wrap   滚动   lin   isp   rgb   relative   

原文地址:https://www.cnblogs.com/mailyuan/p/12195574.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!