vue-admin-beautiful/src/views/vab/betterScroll/index.vue

<template>
  <div class="better-scroll-container">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        动画时长
        <el-slider
          v-model="time"
          style="width: 300px"
          :min="100"
          :max="3000"
        ></el-slider>

        <el-button @click="handleScrollTo(100)">滚动到100像素位置</el-button>
        <el-button @click="handleScrollTo(300)">滚动到300像素位置</el-button>
        <el-button @click="handleScrollBy(100)">向下滚动100像素</el-button>
        <el-button @click="handleScrollBy(-50)">向上滚动50像素</el-button>
        <el-button @click="handleScrollToElement(15)">滚动到第15个</el-button>
        <el-button @click="handleScrollToElement(25)">滚动到第25个</el-button>
      </el-col>
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div ref="wrapper" class="right-content">
          <ul>
            <li v-for="n in 100" :id="`bs-item-${n}`" :key="n">n : {{ n }}</li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import BScroll from "better-scroll";

  export default {
    name: "BetterScroll",
    data() {
      return {
        time: 1000,
        BS: null,
      };
    },
    mounted() {
      this.scrollInit();
    },
    beforeDestroy() {
      this.scrollDestroy();
    },
    methods: {
      handleScrollTo(y) {
        this.BS.scrollTo(0, -y, this.time);
      },
      handleScrollBy(y) {
        this.BS.scrollBy(0, -y, this.time);
      },
      handleScrollToElement(n) {
        this.BS.scrollToElement(`#bs-item-${n}`, this.time);
      },
      scrollInit() {
        this.BS = new BScroll(this.$refs["wrapper"], {
          mouseWheel: true,
          scrollbar: {
            fade: true,
            interactive: false,
          },
        });
      },
      scrollDestroy() {
        if (this.BS) {
          this.BS.destroy();
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .better-scroll-container {
    .right-content {
      height: 500px;
      margin-top: 40px;
      overflow: hidden;
    }
  }
</style>