I'm currently developing a Vue.js application that includes three horizontal-scrolling carousels on one of the pages. However, I am having an issue with unwanted vertical scrolling while the user is navigating horizontally. This causes the layout to move slightly up and down, which disrupts the user experience.
Although I have found a way to disable vertical scrolling (and all scrolling functionality), it requires the user to touch outside the carousel in order to scroll up or down. This results in a less than ideal user experience.
This is the approach I am currently using:
// 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));
});
}
Websites like twich.tv/netflix have carousels that prevent vertical scrolling once horizontal scrolling has begun. However, users can still vertically scroll by touching the carousel and swiping in that direction.
If anyone has insights on how this functionality is implemented, I would greatly appreciate any help or suggestions. Thank you in advance.