在移动设备上触发猫头鹰轮播时禁用滚动答案

【问题标题】：disable scrolling when trigger owl carousel on mobile device在移动设备上触发猫头鹰轮播时禁用滚动
【发布时间】：2018-10-03 00:40:13
【问题描述】：

我注意到在使用 Owl Carousel 2 时，在移动查看中滑动项目时，浏览器也可以上下移动。尝试在移动设备中触发猫头鹰轮播 2 上一个和下一个功能时禁用滚动功能，但它仍然不起作用。

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:5,
    nav:true,
    items:2,
});
// $('.owl-carousel').bind("mousewheel", function() {return false;});
$('.owl-carousel').bind('touchmove', function(e){e.stopPropagation(); alert('allow scroll');});

感谢专家的回答。

谢谢。

【问题讨论】：

标签： owl-carousel-2

【解决方案1】：

对于owlcarousel2，您可以使用mouseDrag 选项。

$('.owl-carousel').owlCarousel({
    mouseDrag:false
});

参考https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

【讨论】：

【解决方案2】：

在您项目的custom.js 文件中查找以下代码

Owl.Defaults = {
        items: 3,
        loop: false,
        center: false,
        rewind: false,

        mouseDrag: true,
        touchDrag: true,}

将内容更改为以下内容：-

touchDrag:false,

而且 owl-carousel 将在移动设备和桌面拖动时停止水平滚动！

【讨论】：

【解决方案3】：

这适用于 iOS 和 VueJS。

var owl = $('.owl-carousel');
    owl.owlCarousel({
    //  your options
})

// disable scroll
owl.on('drag.owl.carousel', function(event) {
    document.ontouchmove = function (e) {
        e.preventDefault()
    }
})

// enable scroll
owl.on('dragged.owl.carousel', function(event) {
    document.ontouchmove = function (e) {
        return true
    }
})

【讨论】：

【解决方案4】：

我在OwlCarousel2 events 的帮助下完成了这项工作。

为此，我们可以一起使用 2 个事件：

drag.owl.carousel 在用户开始拖动时触发
dragged.owl.carousel 拖动完成时触发

这使它像我们想要的那样工作：

var owl = $('.owl-carousel');
owl.owlCarousel({
    //  your options
});

owl.on('drag.owl.carousel', function(event) {
    $('body').css('overflow', 'hidden');
});

owl.on('dragged.owl.carousel', function(event) {
    $('body').css('overflow', 'auto');
});

所以;它使用 css 溢出来在拖动开始时禁用滚动，并在完成后启用它。

【讨论】：