Prevent vertical scrolling on horizontal swipe glidejs

Glidejs is one of the promising slider JavaScript library in ReactJS. We used this library and things are quite smooth.

One of the issues we got on iOS devices regarding scrolling. When we do swipe horizontally it scrolls vertically. This issue only happens on iOS devices. On Android or desktop devices it works nicely.

There is an open issue about it in the git repo of glidejs: https://github.com/glidejs/glide/issues/399

As a workaround, we came up with the following solution and it works. Following is the code that should be placed after the glidejs mount() function call.

const preventDefault = (e) => {
    e.preventDefault();
};

glide.on(['move'], () => {
    document.body.addEventListener('touchmove', preventDefault, { passive: false });
});
glide.on(['move.after'], () => {
    document.body.removeEventListener('touchmove', preventDefault);
});