如何在Vue3中平滑滚动javascript scrollLeft？

<template>
  <div ref="scrollContainer" class="scroll-container">
    <!-- 滚动内容 -->
    <div class="scroll-content">
      <!-- 这里放置你的内容 -->
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const scrollContainer = ref(null);
    let start = 0;
    let currentScrollLeft = 0;
    let targetScrollLeft = 0;
    let animationId = null;

    const smoothScrollTo = (target, duration) => {
      targetScrollLeft = target;
      start = performance.now();
      const animateScroll = (currentTime) => {
        const elapsedTime = currentTime - start;
        currentScrollLeft = currentScrollLeft + (targetScrollLeft - currentScrollLeft) * (elapsedTime / duration);
        scrollContainer.value.scrollLeft = currentScrollLeft;
        if (elapsedTime < duration) {
          animationId = requestAnimationFrame(animateScroll);
        } else {
          cancelAnimationFrame(animationId);
        }
      };
      animationId = requestAnimationFrame(animateScroll);
    };

    onMounted(() => {
      // 示例：滚动到200px的位置
      smoothScrollTo(200, 1000); // 1000ms内平滑滚动到200px位置
    });

    return {
      scrollContainer,
    };
  },
};
</script>

<style>
.scroll-container {
  overflow-x: auto;
  width: 100%;
  height: 200px; /* 设置一个固定高度 */
}

.scroll-content {
  width: max-content;
}
</style>