在移动设备上触发猫头鹰轮播时禁用滚动 [英] disable scrolling when trigger owl carousel on mobile device

问题描述

我注意到使用Owl Carousel 2时，在移动查看中滑动项目时，浏览器也可以上下移动.尝试在移动设备中触发Owl Carousel 2的上一个和下一个功能时禁用滚动功能，但是它仍然无法正常工作.

I noticed when using Owl Carousel 2, while slide the item in mobile viewing, the browser also can be move up and down. Try to disabling the scroll function when trigger the Owl Carousel 2 prev and next function in mobile but it still doesn't work.

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

在这里很感激专家的回答.

Appreciated the answer from expert out here.

谢谢.

推荐答案

我在 OwlCarousel2事件.

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

There are 2 events we can use together for this purpose:

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

1. drag.owl.carousel fires when user start to drag
2. dragged.owl.carousel fires when dragging finished

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

And this make it work like how we want it:

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

So; it use css overflow to disable scrolling when dragging started and enables it back when it finished.

这篇关于在移动设备上触发猫头鹰轮播时禁用滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！