zoukankan      html  css  js  c++  java
  • 修改滚动条的样式

    1.滚动条设置为透明(less语法)
    .scrollbar() {
      &::-webkit-scrollbar {
         0.16rem;
        background-color: transparent;
      }
      &::-webkit-scrollbar-track {
        background-color: transparent;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 0.08rem;
        background-color: rgba(255, 255, 255, 0);
        box-shadow: 0px 1px 3px 0px rgba(44, 47, 49, 0);
      }
      /*滚动条的上下两端的按钮*/
      &::-webkit-scrollbar-button {
        height: 0px;
      }
    }
    2.设置有颜色的滚动条
    &::-webkit-scrollbar {
            0.16rem;
           background: rgba(117, 180, 253, 0.2);
           box-shadow: 0rem 0.01rem 0.01rem 0rem rgba(1, 69, 132, 0.5);
           border-radius: 0.08rem;
     }
    &::-webkit-scrollbar-track {
           background-color: transparent;
     }
    
    &::-webkit-scrollbar-thumb {
           border-radius: 0.08rem;
           background: rgba(138, 191, 253, 1);
           box-shadow: 0px 1px 3px 0px rgba(44, 47, 49, 0.4);
    }
     /*滚动条的上下两端的按钮*/
           &::-webkit-scrollbar-button {
           height: 0px;
    }
  • 相关阅读:
    Finding Palindromes POJ
    吉哥系列故事——完美队形II HDU
    Period II FZU
    生日礼物&&Supermarket
    炮兵阵地[状态压缩DP]
    最小表示法 P1368
    Period
    最长异或路径
    Luogu P5490 扫描线
    解方程
  • 原文地址:https://www.cnblogs.com/hdff/p/10208463.html
Copyright © 2011-2022 走看看