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>

  • 相关阅读:
    630. Course Schedule III
    20151:补足程序1
    5w5:第五周程序填空题1
    621. Task Scheduler
    452. Minimum Number of Arrows to Burst Balloons
    435. Non-overlapping Intervals
    402. Remove K Digits
    406. Queue Reconstruction by Height
    376. Wiggle Subsequence
    122. Best Time to Buy and Sell Stock II
  • 原文地址:https://www.cnblogs.com/xushan03/p/15656840.html
Copyright © 2011-2022 走看看