Question

我注意到在使用猫头鹰旋转木马2时，在移动浏览中滑动项目时，浏览器也可以上下移动。尝试在移动中触发Owl Carousel 2 prev和next功能时禁用滚动功能，但它仍然无法正常工作。

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

赞赏专家的回答。

谢谢。

Answer 1

我在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溢出在拖动开始时禁用滚动，并在完成拖动时将其启用。

Answer 2

这适用于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
    }
})

Answer 3

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

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

        mouseDrag: true,
        touchDrag: true,}

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

touchDrag:false,

和猫头鹰传送带将仅停止在移动和桌面拖动上水平滚动！

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

3 个答案: