美文网首页
CSS自定义滚动条样式

CSS自定义滚动条样式

作者: LuckyJin | 来源:发表于2018-10-24 14:31 被阅读0次

    代码:
    如果加在局部,可以在前面加上类

    .level ::-webkit-scrollbar{
    }
    
    /*滚动条样式*/
    ::-webkit-scrollbar {/*滚动条整体样式*/
      width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
    }
    ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: rgba(0,0,0,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);
    }
    

    效果:


    滚动条.png

    相关文章

      网友评论

          本文标题:CSS自定义滚动条样式

          本文链接:https://www.haomeiwen.com/subject/guzzoftx.html