使用猫头鹰轮播在触摸设备上滑动时禁用垂直滚动 [英] Disable vertical scrolling while swiping on touch device using owl carousel

问题描述

我想在移动设备上水平滑动轮播时禁用网页上的垂直滚动.我正在使用猫头鹰传送带.

I want to disable vertical scrolling on webpage while swiping the carousel horizontally on mobile devices. I'm using the Owl carousel.

我尝试使用CSS溢出:隐藏到html，正文但不起作用.尝试了其他解决方案，但它们不起作用.我尝试过的代码如下.

I have tried to use css overflow: hidden to html, body but doesn't work. Tried the other solutions out there but they don't work. The code I have tried is down below.

// Tried this but doesn't work
var owl = $j(".owl-carousel");
owl.on('drag.owl.carousel', function(event) {
document.ontouchmove = function (e) {
    e.preventDefault()
}
});
owl.on('dragged.owl.carousel', function(event) {
document.ontouchmove = function (e) {
    return true
}
});

// Tried this but doesn't work
owl.on('drag.owl.carousel', function(event) {
    $('body').css('overflow', 'hidden');
});

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

推荐答案

您在初始化轮播的地方尝试过此方法吗?

Did you try this where you initialize the carousel?

$j(".owl-carousel").owlCarousel({
    onDragged: function() {
       $j('body').css('overflow', 'auto');
    },
    onDrag: function() {
       $j('body').css('overflow', 'hidden');
    }
});

此外，我建议仅在body/html标记中添加/删除一个类，以增加溢出，而不是使用JS来操纵CSS本身.

Also, I'd recommend just adding/removing a class to the body/html tag which adds the overflow, rather than using JS to manipulate the CSS itself.

更新:根据评论，似乎存在一个已知的错误.有人问了同样的问题，并在这里得到了答案:在移动设备上触发猫头鹰轮播时禁用滚动

UPDATE: Based on the comments, it appears there is a known bug. Someone else asked this same question and got an answer here: disable scrolling when trigger owl carousel on mobile device

出于数据删除的目的，我将复制有人声称可以在IOS上使用的答案.请测试并告诉我们它是否适用于您的应用程序:

For data removal purposes, I'll copy the answer that someone claimed works on IOS. Please test and tell us if it worked for your application:

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

我仍然建议您保留当前代码，包括onDrag和onDragged函数，并对其进行更新.用以下代码替换脚本标签中的代码:

I would still recommend leaving your current code as is, including the onDrag and onDragged functions, and just update it. Replace your code inside your script tag with this:

var $j = jQuery.noConflict();
$j( document ).ready( function() {
    var owl = $j( ".owl-carousel" ).owlCarousel( {
        stagePadding: 90,
        loop: true,
        lazyLoad: true,
        dots: false,
        margin: 10,
        nav: false,
        onDragged: function() {
            $j( 'body' ).css( 'overflow', 'auto' );
        },
        onDrag: function() {
            $j( 'body' ).css( 'overflow', 'hidden' );
        },
        responsive: {
            0: {
                items: 2
            },
            500: {
                items: 4
            },
            1000: {
                items: 5
            }
        }
    } );

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

} );

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