I'm working in a Vue.js app and in one of the pages I have 3 carousels that the user scrolls horizontally, I would like to disable the vertical scroll because right now when the user is scrolling horizontally the layout moves up and down a little bit.

I found a way to disable the vertical scroll (actually all the scrolling functionality) but in order to scroll up or down, the user need to start touching the screen outside the carousel which results in a worst user experience.

this is my current solution:

// 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));
  });
}

In websites like twich.tv/netflix there are some carousels which once you started to scroll horizontall you can't scroll vertically. But if you touch the carousel and instead of scrolling horizontally you scroll vertically you can go up or down.

Any ideas on how they implemented this?

Any help would be appreciated, thanks in advance.