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

在Vue3中实现平滑滚动，可以通过JavaScript的scrollLeft属性配合requestAnimationFrame来达到目的。以下是一个基本的实现方法：

基础概念

scrollLeft: 是一个DOM元素的只读属性，表示元素的水平滚动条向左滚动的像素值。
requestAnimationFrame: 是一个浏览器提供的API，用于在下次重绘之前调用指定的函数来更新动画。

实现平滑滚动

以下是一个简单的Vue3组件示例，展示了如何使用scrollLeft和requestAnimationFrame实现平滑滚动：

<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>