Estoy creando un menú de desplazamiento horizontal para algunas imágenes. La navegación tiene que funcionar con botones de flecha:
<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>Se muestran 2 imágenes en cualquier momento con los botones de flecha para permitir el desplazamiento hacia la derecha/izquierda para mostrar la tercera imagen. El problema es que el desplazamiento no es fluido.
He intentado configurar:
html: {scroll-behaviour: smooth}o usando:
vue3-smooth-scrollbiblioteca pero parece que no afecta el desplazamiento horizontal.
¿Cómo lo hago suave? ¿Quizás Vue3 proporciona una forma simple?
Descubrí que en lugar de scollLeft puedes usar scrollTo , que trae algunas opciones útiles:
const scrollRight = (() => { document.querySelector('.artwork-container').scrollTo({ left: 500, behavior: 'smooth' }) })