凌的博客

您现在的位置是: 首页 > 前端学习 > Vue > 

Vue

uniapp scroll-view 滚动条颜色

2022-08-08 Vue 74
页面单独定义

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
/deep/::-webkit-scrollbar{
  width: 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{
  width: 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="width: 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>


文章评论

0条评论