Owl-Carousel鼠标滚轮仅单向滚动问题求助

数据老陈

2026-10-2

故障根因

你遇到的单方向切换问题核心来自以下几点：

jQuery 封装的事件对象无法直接读取原生滚轮事件的滚动偏移属性，你代码中直接取e.deltaY始终为undefined，判断逻辑永远触发next.owl，因此只能单向切换。
未做跨浏览器滚轮事件兼容，Firefox 浏览器下滚轮功能会完全失效。
未加滚动节流，单次滚动容易触发多次切换，体验异常。
额外提醒：不要在HTML中手动写owl-loaded、owl-stage-outer、owl-stage这些类，Owl Carousel 初始化时会自动生成对应结构，手动写反而可能导致初始化异常。

修复后的完整JS代码

let owl = $('.owl-carousel');
$(document).ready(function(){
    owl.owlCarousel({
        center:true,
        margin:25,
        navText: [" ", " "],
        loop:true
    })
    // 节流逻辑，防止单次滚动触发多次切换，200ms内只执行一次
    let scrollLocked = false;
    // 同时兼容webkit内核和火狐的滚轮事件
    owl.on('mousewheel DOMMouseScroll', '.owl-stage', function (e) {
        if (scrollLocked) return;
        scrollLocked = true;
        setTimeout(() => scrollLocked = false, 200);
        
        // 从原生事件对象中取滚动偏移，兼容多浏览器
        const delta = e.originalEvent.deltaY || e.originalEvent.detail || e.originalEvent.wheelDelta;
        if (delta > 0) {
            owl.trigger('next.owl');
        } else {
            owl.trigger('prev.owl');
        }
        e.preventDefault();
    });
});