无法在 Firefox 中使用 javascript 获取鼠标滚轮滚动方向答案

【问题标题】：Cant't get the mousewheel scroll direction in Firefox with javascript无法在 Firefox 中使用 javascript 获取鼠标滚轮滚动方向
【发布时间】：2018-09-19 15:36:47
【问题描述】：

我正在尝试使用 javascript 获取滚动方向。我的代码适用于除 Firefox 之外的所有浏览器。下面是方向的代码。

var wheelDirection = function(evt){
if (!evt) evt = event;
return (evt.detail<0) ? 1 : (evt.wheelDelta>0) ? 1 : -1;
};

var direction = wheelDirection();

下面是我的完整代码，我正在尝试使用 Greensock js 库对滚动进行一些鼠标滚轮缓动...它适用于除 Firefox 之外的所有浏览器，即使向上滚动，滚动也会不断向下...另外使用 feature.js 检测支持触摸的设备...我只是无法弄清楚问题是什么...请 - 没有 jQuery 解决方案。我想要纯 javascript...

if (feature.touch) {
  //touch supported
} else {
  //touch not supported    
  function domLoad() {

    scrollTime = 0.6;
    scrollDistance = 360;

    function scroll(event) {

      event.preventDefault();

      var wheelDirection = function(evt){
        if (!evt) evt = event;
        return (evt.detail<0) ? 1 : (evt.wheelDelta>0) ? 1 : -1;
      };

      var direction = wheelDirection();
      console.log(direction);
      var scrollTop = window.pageYOffset;
      var finalScroll = scrollTop - parseInt(direction*scrollDistance);

      TweenMax.to(window, scrollTime, {
        scrollTo : { y:finalScroll, easing:Sine.easeOut ,autoKill:true }, overwrite: 10
      });

    }   

    window.addEventListener("wheel", scroll);

  };

  window.addEventListener("DOMContentLoaded", domLoad);

};

【问题讨论】：

event.deltaY 现在似乎可以解决问题了

标签： javascript firefox mousewheel

【解决方案1】：

这可能值得一试，我已经在几个项目中使用过它，而且它似乎工作稳定。

var scroll = e.originalEvent.deltaY * -1 || e.originalEvent.wheelDelta || e.originalEvent.detail * -1;

哪个是从：

.on("mousewheel DOMMouseScroll")

然后您必须使用应该是 int 的滚动变量来检查方向。

我通过控制台找到了这一点。注销滚动事件值并查看事件数据，但这样做时您需要检查支持。

【讨论】：

最近有没有更好的办法？

【解决方案2】：

wheel事件的event.deltaY是Chrome和Firefox的交叉兼容解决方案。 但不确定它在其他浏览器和设备上的表现如何。

【讨论】：