使用Owl Carousel禁用移动端滑动轮播时的页面垂直滚动

我完全懂你这个困扰——在移动端横向滑动Owl Carousel轮播的时候，页面总是跟着垂直滚动，试了好几种方法都不管用对吧？之前你尝试的修改document.ontouchmove或者动态设置overflow:hidden没生效，大概率是因为移动端浏览器的滚动机制和事件优先级问题，下面给你两个经过验证的解决方案：

方案一：精准拦截垂直触摸滑动（推荐） #

这个方法的核心是只在拖拽轮播时拦截垂直方向的滑动，不影响横向拖拽操作，同时避免全局禁用触摸事件带来的副作用：

var owl = $j(".owl-carousel");
var startY;
// 提前定义触摸处理函数，方便后续移除监听
function touchStartHandler(e) {
    startY = e.touches[0].clientY;
}

function touchMoveHandler(e) {
    var moveY = e.touches[0].clientY;
    var diffY = Math.abs(moveY - startY);
    // 当垂直滑动距离超过5px时，阻止默认滚动行为（阈值可按需调整）
    if (diffY > 5) {
        e.preventDefault();
    }
}

owl.on('drag.owl.carousel', function() {
    // 拖拽开始时添加触摸监听
    document.addEventListener('touchstart', touchStartHandler, { passive: false });
    document.addEventListener('touchmove', touchMoveHandler, { passive: false });
});

owl.on('dragged.owl.carousel', function() {
    // 拖拽结束后移除监听，恢复正常滚动
    document.removeEventListener('touchstart', touchStartHandler);
    document.removeEventListener('touchmove', touchMoveHandler);
});

为什么这个方法有效？ #

• 没有全局覆盖document.ontouchmove，而是在需要的时候临时添加监听，结束后立即移除，不会影响页面其他元素的触摸交互；
• 通过判断滑动的垂直距离阈值，精准区分横向拖拽和垂直滚动，避免误拦截轮播的横向滑动操作；
• 设置{ passive: false }确保e.preventDefault()能生效（部分移动端浏览器默认passive为true，会阻止默认行为的调用）。

方案二：用CSS固定页面+保存滚动位置 #

如果方案一还是有问题，试试这个更“硬核”的方法——通过CSS固定页面位置，同时保存滚动位置避免页面跳顶：

JavaScript代码 #

var owl = $j(".owl-carousel");
var scrollTop;

owl.on('drag.owl.carousel', function() {
    // 保存当前页面滚动位置
    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    // 添加禁用滚动的类
    $('body').addClass('no-scroll');
    // 固定页面位置，防止跳顶
    $('body').css('top', -scrollTop + 'px');
});

owl.on('dragged.owl.carousel', function() {
    // 移除禁用类，恢复滚动
    $('body').removeClass('no-scroll');
    // 恢复之前的滚动位置
    window.scrollTo(0, scrollTop);
});

对应的CSS #

body.no-scroll {
    position: fixed;
    width: 100%;
    overflow: hidden;
    /* 可选：避免页面抖动 */
    left: 0;
    right: 0;
}

注意事项 #

• 这种方法会完全固定页面，适合没有其他局部滚动容器的场景；
• 必须保存和恢复滚动位置，否则用户拖拽结束后页面会回到顶部，体验很差。

额外检查点 #

1. 确保你的Owl Carousel初始化时开启了触摸拖拽：

owl.owlCarousel({
    touchDrag: true, // 默认是true，但最好显式声明
    // 其他配置项...
});

2. 测试不同移动端浏览器（iOS Safari、Chrome移动端、微信内置浏览器等），因为不同浏览器的触摸事件和滚动机制有细微差异；
3. 如果页面中有自定义滚动容器（比如带overflow:scroll的div），需要单独处理这些容器的触摸事件，避免被全局拦截影响。

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