zoukankan      html  css  js  c++  java
  • uniapp 自定义滚动条颜色,并且一直显示

    页面单独定义

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    /deep/::-webkit-scrollbar{
       10px!important;
      height: 10px!important;
      background-color: rgba(0,0,0,0)!important;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    /deep/::-webkit-scrollbar-track{
      border-radius: 5px!important;
      background-color: rgba(0,0,0,0)!important;
    }

    /*定义滑块 内阴影+圆角*/
    /deep/::-webkit-scrollbar-thumb{
      border-radius: 5px!important;
      background-color: #bbb!important;
    }

    全局定义

    第一步:app.vue文件,增加以下内容

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar{
       5px!important;
      height: 5px!important;
      background-color: rgba(0,0,0,0)!important;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track{
      border-radius: 5px!important;
      background-color: rgba(0,0,0,0)!important;
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb{
      border-radius: 5px!important;
      background-color: #999!important;
    }

    第二步:使用

    <scroll-view style="height: 300rpx;background-color: yellow;"  :scroll-y="true">
      <view style=" 100%;">
        <view class="item">1</view>
        <view class="item">2</view>
        <view class="item">3</view>
        <view class="item">4</view>
        <view class="item">5</view>
      </view>
    </scroll-view>

  • 相关阅读:
    函数重载和函数指针在一起
    Uva
    Uva
    Uva
    Uva
    Uva
    CCPC-Wannafly-day5
    CCPC-Wannafly-day3
    CCPC-Wannafly-day2
    CCPC-Wannafly-Winter 2020.01.12总结
  • 原文地址:https://www.cnblogs.com/xushan03/p/15656840.html
Copyright © 2011-2022 走看看