頁面單獨定義
/*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
/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>