Currently, I am in the process of creating a horizontal scroll menu for displaying images. The navigation functionality includes arrow buttons for scrolling:
<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>
The setup displays two images at once, with the option to scroll left or right using the arrow buttons in order to reveal the third image. However, there is an issue with the smoothness of the scrolling animation.
I have attempted to address this by setting:
html: {scroll-behaviour: smooth}
and also experimenting with:
vue3-smooth-scroll
library, although it seems not to have the desired effect on the horizontal scrolling motion.
Is there a simple way within Vue3 to achieve the smooth scrolling? Any suggestions would be greatly appreciated!