使用 owl carousel 时禁用触摸设备上的垂直滚动

Question

当在触摸设备上从左到右拖动水平轮播时，它还允许它上下拖动，从而摇晃整个页面。如何禁用 owl carousel 上的垂直滚动。如果有人可以提供帮助，我可以发布js文件

提前致谢

Answer 1

很棒的 css3 :)

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

Answer 2

这似乎对我有用，至少在 iOS 上，还没有在 Android 上测试过。

当您开始用鼠标或触摸滑动时，我看到 Owl Carousel 将 .owl-grab 类添加到滑块中。然后我从 @Turnerj 找到了这段代码，然后将 .owl-grab 放入代码中。

触摸移动特定元素时禁用滚动

它还适用于同一页面上的多个滑块。希望这可以帮助！（我是 jQuery 新手，所以这个解决方案可能存在缺陷）

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