animejs 简单的scroll滚动demo

<template>
  <div>
    <div class="anime">
      <div
        class="box"
        :id="'_' + item"
        @click="handelClick(item)"
        v-for="item in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]"
      >
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
import anime from "animejs/lib/anime.es.js";
export default {
  methods: {
    scrollTo(selector, offset, cb) {
      var demosEl = document.querySelector(".anime");
      var offset = offset || 0;
      var el = document.querySelector(selector);
      anime({
        targets: { scroll: demosEl.scrollTop },
        scroll: el.offsetTop - offset,
        duration: 500,
        easing: "easeInOutQuart",
        update: function (a) {
          demosEl.scrollTop = a.animations[0].currentValue;
        },
        complete: function () {
          if (cb) cb();
        },
      });
    },
    handelClick(item) {
      this.scrollTo("#_" + item, 0, () => {});
    },
  },
};
</script>

<style>
.anime {
  width: 200px;
  background: pink;
  overflow-y: scroll;
  height: 100vh;
  /* overflow-y: scroll; */
}
.box {
  height: 200px;
  border: 1px solid #eee;
}
</style>