Question

我正在尝试使用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);

};

Answer 1

这可能值得尝试，我已经在几个项目中使用了它，并且看起来工作得很顺畅。

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

哪个从运行：

.on("mousewheel DOMMouseScroll")

然后您将不得不使用应该为int的滚动var检查方向。

我是通过console.log找到的。注销滚动事件值并浏览事件数据，但是这样做时您将需要检查支持。

Answer 2

event.deltaY事件的

wheel是适用于Chrome和Firefox的交叉兼容解决方案。 不确定此操作在其他浏览器和设备上的行为。

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

2 个答案: