vue 按钮控制文字自动滚动

<template>
  <div>
    <button @click="toggleScroll">
      {{ isScrolling ? "停止滚动" : "开始滚动" }}
    </button>
    <div ref="textContainer" class="text-container">
      {{ longText }}
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isScrolling: false,
      timer: null,
      longText: "这是一段很长的文本...",
    };
  },
  methods: {
    toggleScroll() {
      if (this.isScrolling) {
        this.stopScroll();
      } else {
        this.startScroll();
      }
    },
    startScroll() {
      this.isScrolling = true;
      this.timer = setInterval(() => {
        const container = this.$refs.textContainer;
        container.scrollTop += 1;
        if (
          container.scrollTop >=
          container.scrollHeight - container.clientHeight - 1
        ) {
          this.stopScroll();
        }
      }, 20);
    },
    stopScroll() {
      this.isScrolling = false;
      clearInterval(this.timer);
      this.timer = null;
      this.$refs.textContainer.scrollTop = 0;
    },
  },
};
</script>