html自定义滚动条

自滚动条可以通过设置默认的滚动条和滚动条背景来实现。代码示例如下：

<view class="myscrollBlock">
  <view class="myscrollBg"></view>
  <view class="myscroll" :style="`width:${scroll_width}rpx;left:${scroll_left}rpx;`"></view>
</view>

在上述代码中，使用了一个外层容器 `myscrollBlock` 来包裹滚动条。通过设置 `myscrollBg` 来定义滚动条的背景样式，设置 `myscroll` 来定义滚动条的样式，例如高度和背景颜色等。

根据插件的 `handleScroll` 事件，可以动态获取滚动的进度。代码示例如下：

handleScroll(vertical, horizontal, nativeEvent) {
  this.scroll_width = horizontal.barSize * 100;
  this.scroll_left = (1 - horizontal.barSize) * horizontal.process * 100;
}

在上述代码中，通过获取滚动条的尺寸和进度，计算得到滚动条的宽度和左侧位置，从而实现滚动条的动态效果。

另外，如果需要设置默认滚动条的宽度，可以根据容器的实际总宽度来计算。代码示例如下：

setMyScrooll() {
  this.scroll_width = 0;
  this.scroll_left = 0;
  let listWidth = (110 * 24) * this.list.length;
  let blockWidth = uni.getStorageSync('sysTemInfo').screenWidth * 0.9;
  this.scroll_width = blockWidth / listWidth * 100;
}

在上述代码中，通过计算容器现有宽度和容器实际总宽度的比例，得到默认滚动条的宽度。

综上所述，通过设置默认的滚动条和滚动条背景，以及根据插件事件和容器宽度来动态调整滚动条的样式，可以实现自定义滚动条效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [HTML自定义滚动条附效果图和完整源码](https://blog.csdn.net/qq_35713752/article/details/129588798)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]