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

Question

我正在为一些图像构建一个水平滚动菜单。导航必须使用箭头按钮：

<template>
  <section id="artwork" class="artwork">
    <div class="arrow left" @click="scrollLeft"></div>
    <div class="artwork-container">
      <img :src="state.image1" class="image">
      <img :src="state.image2" class="image">
      <img :src="state.image3" class="image">
    </div>
    <div class="arrow right" @click="scrollRight"></div>
  </section>
</template>

<script setup>
const scrollLeft = (() => {
    document.querySelector('.artwork-container').scrollLeft -= 500
})
const scrollRight = (() => {
    document.querySelector('.artwork-container').scrollLeft += 500
})
</script>

使用箭头按钮可随时显示 2 张图像，以启用向右/向左滚动以显示第三张图像。问题是滚动不流畅。

我试过设置：

html: {scroll-behaviour: smooth}

或使用：

vue3-smooth-scroll

图书馆，但它似乎不影响水平滚动。

如何让它顺利？也许Vue3提供了一个简单的方法？

Answer 1

我发现您可以使用scrollTo 代替scollLeft，这带来了一些方便的选项：

const scrollRight = (() => {
    document.querySelector('.artwork-container').scrollTo({
        left: 500,
        behavior: 'smooth'
    })
})