改变uni-app中scroll-view的默认滚动条样式

1,277 阅读1分钟

滚动条的一些组成:

  • ::-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;
    }