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?
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'
})
})