带有幻灯片的鼠标滚轮事件和滚动方向增量-跨浏览器

问题描述

我有以下JS代码：

document.addEventListener('wheel',onMouseWheel,{passive: false});

// Slides change on mouse scroll
function onMouseWheel(event) {
    let delta = event.wheelDelta / 30 || -event.detail;
    if(delta < -1) {  //scrolling down -> next slide
        // move to slide below
    } else if(delta > 1)  {  // -> prev
        // move to slide above
    }
    event.preventDefault();
}

该功能目前在Chrome和Safari中有效，但在Firefox中失败。

以上代码中的event.detail在Firefox中返回0。

在MDN文档中，他们提到： 受信任的事件永远不会发送值为0的详细信息。（不确定这意味着什么）。

我还尝试了以下代码：

document.addEventListener('wheel',{passive: false});

// Slides change on mouse scroll
function onMouseWheel(event) {
    let delta = event.deltaY;
    if(delta > 0) {  //scrolling down -> next slide
        // move to slide below
    } else if(delta < 0)  {  // -> prev
        // move to slide above
    }
    event.preventDefault();
}

部分可在所有浏览器中使用。但是由于“滚轮”事件会在单个鼠标滚轮上触发多次，因此在我的情况下会跳过几张幻灯片。

我对现在应该如何进行做了很多研究，但是我找不到最新的跨浏览器解决方案。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）