滚动条的一些组成:
- ::-webkit-scrollbar 滚动条整体部分,可以设置宽度等
- ::-webkit-scrollbar-thumb 滚动条里面的滑块
- ::-webkit-scrollbar-button 滚动条轨道两端的按钮,允许通过点击以微调滑块的位置
- ::-webkit-scrollbar-track 滚动条的轨道(里面装有thumb)
- ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分
- ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时的交汇处
- ::-webkit-resizer 某些元素的corner部分(如textarea的可拖动按钮)
<scroll-view scroll-y="true" @scrolltoupper="upper" @scrolltolower="lower" class="body">
<radio-group class="w-100" @change="radioChange">
<label v-for="(item, index) in collectors" :key="item.cid">
<view class="flex justify-between mb-2 border-bottom p-2"> <text>{{item.cname}}</text>
<radio :value="String(index)" :checked="index === curCollector" />
</view>
</label>
</radio-group>
</scroll-view>
/deep/ ::-webkit-scrollbar {
/*滚动条整体样式*/
width: 20rpx !important;
height: 1px !important;
background: #ccc !important;
-webkit-appearance: auto !important;
}
/deep/ ::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px !important;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
background: #7b7979 !important;
}
/deep/ ::-webkit-scrollbar-track {
position: absolute !important;
/*滚动条里面轨道*/
// box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
// border-radius: 10px !important;
background: #ffffff !important;
}