Owl-Carousel拖拽时垂直滚动未停止：寻求禁用滚动的实现方案

我来帮你搞定这个问题！你遇到的核心问题是拖拽轮播时，浏览器的默认垂直滚动行为没有被正确阻止，结合Owl Carousel的事件和简单的CSS控制就能完美解决。

解决方案思路 #

我们可以利用Owl Carousel提供的onDrag和onDragged事件，在拖拽开始时禁用页面垂直滚动，拖拽结束后立即恢复。同时需要阻止触摸事件的默认行为，避免浏览器同时响应水平拖拽和垂直滚动。

完整代码实现 #

首先调整你的初始化脚本，加入事件处理逻辑，同时注意修正脚本加载顺序（jQuery必须在Owl Carousel和初始化代码之前加载）：

<!-- 先加载jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 记得加载Owl Carousel的CSS和JS文件 -->
<link rel="stylesheet" href="path/to/owl.carousel.css">
<script src="path/to/owl.carousel.min.js"></script>

<script>
$('.owl-carousel').owlCarousel({ 
    loop:false, 
    margin:10, 
    responsiveClass:true,
    // 拖拽开始时触发
    onDrag: function(event) {
        // 禁用页面垂直滚动
        $('body').css('overflow-y', 'hidden');
        // 阻止触摸事件的默认行为，避免触发垂直滚动
        event.originalEvent.preventDefault();
    },
    // 拖拽结束时触发
    onDragged: function() {
        // 恢复页面垂直滚动
        $('body').css('overflow-y', 'auto');
    }, 
    responsive:{ 
        0:{ items:1 }, 
        600:{ items:2 }, 
        960:{ items:3 }, 
        1200:{ items:3 } 
    } 
});
</script>

更优雅的类名控制（可选） #

如果不想直接操作body的样式，可以提前定义一个CSS类，通过添加/移除类来控制滚动：

/* 定义禁用滚动的类 */
.no-vertical-scroll {
    overflow-y: hidden !important;
    /* 可选：防止iOS上的弹性滚动干扰 */
    position: fixed;
    width: 100%;
}

然后修改事件处理逻辑：

onDrag: function() {
    $('body').addClass('no-vertical-scroll');
},
onDragged: function() {
    $('body').removeClass('no-vertical-scroll');
}

关键注意事项 #

1. 脚本加载顺序：jQuery必须在Owl Carousel和你的初始化代码之前加载，否则会出现$ is not defined的错误。
2. 触摸事件阻止：event.originalEvent.preventDefault()是核心，它能阻止浏览器在拖拽轮播时同时触发页面的垂直滚动行为，确保只有轮播的水平拖拽生效。
3. iOS兼容性：如果面向iOS设备，添加position: fixed和width: 100%可以避免系统自带的弹性滚动干扰禁用效果。

内容的提问来源于stack exchange，提问作者Akash.syed