disable vertical scrolling on touch device while using owl carousel

Question

when dragging horizontal carousel left to right on touch device it also allows it to be dragged up and down which jiggles the whole page around. How can I disable vertical scrolling on owl carousel. I can post the js file if anyone can help

Thanks in advance

Answer 1

Awesome css3 :)

.owl-carousel
{
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

Answer 2

This seems to work for me, at least on iOS, haven't tested on Android.

When you start sliding with mouse or touch I saw that Owl Carousel adds the class .owl-grab to the slider. I then found this code from @Turnerj and just put .owl-grab in the code.

Disable scrolling when touch moving certain element

It also works with multiple sliders on same page. Hope this helps! (I'm new to jQuery so there could probably be flaws to this solution)

window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e) {
    if ($(e.target).closest('.owl-grab').length == 1) {
        blockMenuHeaderScroll = true;
    }
});
$(window).on('touchend', function() {
    blockMenuHeaderScroll = false;
});
$(window).on('touchmove', function(e) {
     if (blockMenuHeaderScroll) {
        e.preventDefault();
     }
});