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

Posted 2021-03-16 mailyuan

      .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);
               }
}