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

Posted 2023-03-06

【中文标题】使用 owl carousel 在触摸设备上滑动时禁用垂直滚动

【英文标题】：Disable vertical scrolling while swiping on touch device using owl carousel

【发布时间】：2019-12-16 23:01:13

【问题描述】：

我想在移动设备上水平滑动轮播时禁用网页上的垂直滚动。我正在使用 Owl 旋转木马。

我尝试使用 css overflow: hidden to html, body 但不起作用。 尝试了其他解决方案，但它们不起作用。我试过的代码在下面。

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

【问题讨论】：

如果您向左或向右滑动，它将如何垂直滚动？您会将链接附加到您的网站吗？谢谢。

在轮播上向左或向右滑动时，它也会上下移动页面。触摸转盘后，它应该会立即修复。

这个轮播的例子https://nickpiscitelli.github.io/Glider.js谢谢。

【参考方案1】：

你在初始化轮播的地方试过这个吗？

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

另外，我建议只在 body/html 标签中添加/删除一个类来添加溢出，而不是使用 JS 来操作 CSS 本身。

更新： 根据 cmets，似乎存在一个已知错误。其他人问了同样的问题并在这里得到了答案： disable scrolling when trigger owl carousel on mobile device

出于数据删除目的，我将复制某人声称适用于 ios 的答案。请测试并告诉我们它是否适用于您的应用程序：

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 函数，然后更新它。将脚本标签内的代码替换为：

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

 );

【讨论】：

谢谢，我试过了，还是不行。这是下面的完整代码

我也试过css body.home overflow: hidden!important;

遇到任何 JS 错误？你能分享一个指向你网站的链接吗？

错误是因为在我的代码中我使用了$，但是你用$j初始化了它......所以我更新了我的代码。再试一次？

感谢更改，现在错误消失了，但页面仍然在滑动轮播时上下移动。