移动端Owl Carousel 2滑动轮播时页面联动滚动问题及无效方案求助

我完全懂你遇到的这个糟心问题——移动端滑动轮播项时，页面跟着上下晃，体验感太差了。你之前尝试的touchmove绑定没起作用，核心原因是只阻止了事件冒泡，没处理浏览器默认的滚动行为，而且没区分滑动方向，甚至可能干扰轮播本身的横向滑动。下面给你两个经过验证的有效方案：

方案一：判断滑动方向，精准阻止纵向滚动 #

这个方法会识别用户是横向操作轮播还是纵向滑动页面，只在横向滑动轮播时阻止页面的上下滚动，完全不影响轮播的正常切换：

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:5,
    nav:true,
    items:2,
});

// 记录触摸起始坐标
let startTouchX, startTouchY;

// 监听触摸开始事件，保存初始位置
$('.owl-carousel').on('touchstart', function(e) {
    const touchEvent = e.originalEvent.touches[0];
    startTouchX = touchEvent.clientX;
    startTouchY = touchEvent.clientY;
});

// 监听触摸移动事件，判断滑动方向
$('.owl-carousel').on('touchmove', function(e) {
    const touchEvent = e.originalEvent.touches[0];
    const deltaX = touchEvent.clientX - startTouchX;
    const deltaY = touchEvent.clientY - startTouchY;

    // 如果横向滑动距离大于纵向，说明是操作轮播，阻止默认滚动行为
    if (Math.abs(deltaX) > Math.abs(deltaY)) {
        e.preventDefault();
    }
});

方案二：利用Owl Carousel自带事件控制页面滚动 #

通过监听轮播的滑动开始/结束事件，动态切换页面的滚动权限，滑动过程中禁止页面滚动，滑动完成后立即恢复：

// 先初始化轮播并保存实例
const $owlCarousel = $('.owl-carousel').owlCarousel({
    loop:true,
    margin:5,
    nav:true,
    items:2,
});

// 轮播开始滑动时，禁止页面滚动
$owlCarousel.on('translate.owl.carousel', function() {
    $('body').css('overflow', 'hidden');
});

// 轮播滑动结束后，恢复页面滚动
$owlCarousel.on('translated.owl.carousel', function() {
    $('body').css('overflow', 'auto');
});

补充说明：为什么之前的代码没生效？ #

你之前用的e.stopPropagation()只是阻止事件向上冒泡，但浏览器的默认滚动行为是由touchmove的默认动作触发的，需要用e.preventDefault()来阻止。不过直接粗暴阻止所有touchmove会导致轮播的横向滑动也失效，所以方案一的方向判断才是关键。

内容的提问来源于stack exchange，提问作者faliqaiman