Estoy trabajando en una aplicación Vue.js y en una de las páginas tengo 3 carruseles que el usuario se desplaza horizontalmente, me gustaría deshabilitar el desplazamiento vertical porque en este momento, cuando el usuario se desplaza horizontalmente, el diseño se mueve hacia arriba y hacia abajo. un poco.

Encontré una manera de deshabilitar el desplazamiento vertical (en realidad, toda la funcionalidad de desplazamiento), pero para desplazarse hacia arriba o hacia abajo, el usuario debe comenzar a tocar la pantalla fuera del carrusel, lo que resulta en una peor experiencia de usuario.

esta es mi solución actual:

 // Method for handling scroll const touchMoveHandler = event => { if(event.cancelable) event.preventDefault(); } // Get all the carousels let carousels = document.querySelectorAll('.v-scroller'); // Handle scrolling for (const carousel of carousels) { // Add event listener on touchstart to remove scrolling functionality carousel.addEventListener('touchstart', event => { window.addEventListener('touchmove', touchMoveHandler(event), {passive: false}); }); // Remove previous event listener on touchend carousel.addEventListener('touchend', event => { window.removeEventListener('touchmove', touchMoveHandler(event)); }); }

En sitios web como twich.tv/netflix hay algunos carruseles que, una vez que comienzas a desplazarte horizontalmente, no puedes desplazarte verticalmente. Pero si tocas el carrusel y en lugar de desplazarte horizontalmente desplazas verticalmente puedes subir o bajar.

¿Alguna idea sobre cómo implementaron esto?

Cualquier ayuda sería apreciada, gracias de antemano.