美文网首页
css设置滚动条的样式

css设置滚动条的样式

作者: HonneyHao | 来源:发表于2021-01-26 20:04 被阅读0次

    .main {
    xxx...
    &::-webkit-scrollbar { // width是设置垂直方向上的滚动条的宽度,height是设置水平方向上的滚动条的宽度
    width: 10px;
    }

    &::-webkit-scrollbar-thumb { // 滑块的样式
      border-radius: 5px;
      background: #c2c2c2;
      box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.2) inset;
      border: 5px solid transparent;
    }
    
    &::-webkit-scrollbar-track { // 滑动的轨道
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
      border: 5px solid transparent;
    }
    

    }

    相关文章

      网友评论

          本文标题:css设置滚动条的样式

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