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;
    }
  • 相关阅读:
    NOIP simulation
    NOIP2013
    BZOJ 4176 Lucas的数论
    BZOJ 3512 DZY Loves Math IV
    BZOJ 3994 Sum
    BZOJ 4174 tty的求助
    BZOJ 3561 DZY Loves Math VI
    BZOJ 2508 简单题/BZOJ 3775 点和直线
    FTR #1 百步穿杨
    BZOJ 4407 于神之怒加强版
  • 原文地址:https://www.cnblogs.com/hdff/p/10208463.html
Copyright © 2011-2022 走看看