vue 项目中自定义scroll样式

css3中可以设置滚动条的样式，但是兼容性一直被受争议，偶然看到一个css+js 的方式自定义一个滚动条，现在把他分享出来
感谢开源项目@vue-tiny-code

上代码

<template>
  <div class="scroll-bar">
    <div class="scroll-wrap" ref="wrap" @scroll="handleScroll">
      <!-- 纵向 -->
      <div class="bar-wrap-vertical">
        <div
          class="bar-vertical"
          :style="{ height: `${sizeY}px`, transform: `translateY(${moveY}px)` }"
        ></div>
      </div>
      <!-- 横向 -->
      <!-- <div class="bar-wrap-horizontal">
        <div
          class="bar-horizontal"
          :style="{ width: `${sizeX}px`, transform: `translateX(${moveX}px)` }"
        ></div>
      </div> -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "custom-warp",
  data() {
    return {
      moveY: 0,
      moveX: 0,
      sizeY: 15,
      sizeX: 15,
    };
  },
  computed: {
    xBartranslate() {},
  },
  methods: {
    handleScroll(event) {
      const { wrap } = this.$refs;
      this.moveY = (wrap.scrollTop / wrap.scrollHeight) * wrap.clientHeight;
      this.moveX = (wrap.scrollLeft / wrap.scrollWidth) * wrap.clientWidth;
    },
  },
  mounted() {
    const { wrap } = this.$refs;
    this.sizeY = (wrap.clientHeight / wrap.scrollHeight) * wrap.clientHeight;
    this.sizeX = (wrap.clientWidth / wrap.scrollWidth) * wrap.clientWidth;
  },
};
</script>

<style lang="scss" scoped>
.scroll-bar {
  overflow: hidden;
  position: relative;
  //   border: 1px solid red;
}
.scroll-wrap {
  overflow: scroll;
  max-height: 280px;
  margin-bottom: -17px;
  margin-right: -17px;
}

.bar-wrap-vertical {
  position: absolute;
  right: 0;
  width: 5px;
  height: 100%;
  background-color: red;
  .bar-vertical {
    width: 5px;
    position: absolute;
    cursor: pointer;
    background-color: blue;
  }
}

.bar-wrap-horizontal {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 5px;
  background-color: red;
  .bar-horizontal {
    height: 5px;
    position: absolute;
    cursor: pointer;
    background-color: blue;
  }
}
</style>

父页面引用

  <div class="demo-container">
    <custom-scrollbar>
      <div>
        <p v-for="item in 100" :key="item">
          <span v-for="font in 100" :key="font">{{ font }}</span>
        </p>
      </div>
    </custom-scrollbar>
  </div>

.demo-container {
  width: 400px;
  height: 400px;
  margin: 5rem auto;
}

效果如下

image.png