基于vue 的自定义滚动条

基于vue 的自定义滚动条

项目需要，自己开发了自定义滚动条，效果图看后面，还有很多不足，欢迎给出更优化的方案。

scrollContainer.vue

<template>
  <div class="scrollbar-box" :style="{height: height}">
    <div class="scrollbar-y">
      <div ref="scrollRef" class="scroll-wrap" @scroll="onMosewheel">
        <slot></slot>
      </div>
      <div v-show="heightPre < 1" ref="barRef" class="scrollbar-track">
        <div
          :style="{height: barHeight + 'px', transform: 'translateY(' + translateY + 'px)'}"
          class="scrollbar-thumb"
          @mousedown.stop.prevent="moveStart"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
   
  components: {
   },
  props: {
   
    height: {
   
      type: String,
      default: '100%'
    }
  },
  data() {
   
    return {
   
      isMove: false,
      trackHeight: 0, // 滚动条轨道高度
      wrapHeight: 0, // 容器高度（可视高度）
      wrapContentHeight: 0, // 内容高度（可滚动内容的高度）
      translateY: 0,

      moveClientY: 0,
      scrollTop: 0,
    }
  },
  computed: {
   
    barHeight