Awesome css3 :)

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

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

Use hammer.js with addEventListner for Classes. I have tested with iOS (iphoneX) and Android (Nexus 5X) and work like a charme. I hope can help!

window.blockMenuHeaderScroll = true;
        var mc = new Hammer(document);
        var classname = document.getElementsByClassName("elenco_image");

        mc.on("swipeleft swiperight panleft panright", function(ev) {
            console.log(ev.type + " gesture detected.");
            window.blockMenuHeaderScroll = true;
        });

        mc.on("swipeup swipedown panup pandown", function(ev) {
            console.log(ev.type + " gesture detected.");
            window.blockMenuHeaderScroll = false;
        });

        for (var i = 0; i < classname.length; i++) {
            classname[i].addEventListener('touchmove', function(evt) {
                if (blockMenuHeaderScroll) {
                    evt.preventDefault();
                }

            }, {
                passive: false
            });
        }