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

Question

I am building a horizontal scroll menu for some images. The navigation has to work with arrow buttons:

<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 images are displayed at any time with the arrow buttons to enable scrolling right/left to show the third image. Problem is that the scrolling is not smooth.

I've tried setting:

html: {scroll-behaviour: smooth}

or using:

vue3-smooth-scroll

library but it doesn't affect horizontal scroll it seems.

How do I get it smooth? Maybe Vue3 provides a simple way?

Answer 1

I found that instead of scollLeft you can use scrollTo which brings some handy options:

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