javascript - DOMMouseScroll，event.originalEvent.detail始终返回0

我正在研究一个简单的JS / jQuery脚本来检测鼠标滚轮的滚动。

在大多数竞标为“ mousewheel”的浏览器上，一切正常，但是在Firefox上，我必须使用“ DOMMouseScroll”。

问题是event.originalEvent.detail（从Firefox调用时）总是返回0。这样，我无法知道用户何时向上或向下滚动，并且我确定这不是预期的行为。

这是我的代码，如果可能的话：

$j(document).on('mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    if(delay) return;
    delay = true;
    setTimeout(function(){delay = false},2000)

    var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;
    window.alert(event.originalEvent.detail); // to check the value
    var a= document.getElementsByClassName('wpb_revslider_element');
    if(wd <= 0) {
      for(var i = 0 ; i < a.length ; i++) {
        var t = a[i].getClientRects()[0].top;
        if(t >= 40) break;
      }
    }
    else {
      for(var i = a.length-1 ; i >= 0 ; i--) {
        var t = a[i].getClientRects()[0].top;
        if(t < -20) break;
      }
    }

    if(i >= 0 && i < a.length) {
      $j('html,body').animate({
        scrollTop: a[i].offsetTop
      });
    }
  });
})();

您还有其他建议吗？
谢谢

最佳答案

改为使用wheel事件，官方文档here。 mousewheel事件已过时。签出原始文档here。

$(document).on('wheel', function(event) {
  event.preventDefault();
  if (delay) return;
  delay = true;
  setTimeout(function() {
    delay = false
  }, 2000)
  var wd = event.originalEvent.wheelDelta || -event.originalEvent.detail;
  window.alert(event.originalEvent.detail); // to check the value
  var a = document.getElementsByClassName('wpb_revslider_element');
  if (wd <= 0) {
    for (var i = 0; i < a.length; i++) {
      var t = a[i].getClientRects()[0].top;
      if (t >= 40) break;
    }
  } else {
    for (var i = a.length - 1; i >= 0; i--) {
      var t = a[i].getClientRects()[0].top;
      if (t < -20) break;
    }
  }

  if (i >= 0 && i < a.length) {
    $j('html,body').animate({
      scrollTop: a[i].offsetTop
    });
  }
});

  更新：


deltaX，deltaY和其他著名的浏览器支持Chrome和Firefox属性，只需检查上述wheel事件的文档即可。根据您的要求，您可以更改要选择的值。不同浏览器中的实际值可能会有所不同，但是行为是相同的。只需检查是否已经小于或大于零即可。

var wd = event.originalEvent.deltaY; // for vertical scrolling
  // For horizontal scroll change check `event.originalEvent.deltaX` value

// positive value of wd above will mean scrolled down and
//negative will mean scrolled down.

希望这对您有所帮助！


  另一个更新


Safari浏览器上似乎有一个使用wheel事件的警告

根据OP的意见


  在Safari上无法使用，因此我将旧功能与“ mousewheel”一起使用
  Safari和所有其他浏览器上的新“转轮”。对于读者来说，
  请注意，“ wheel”坐标和“ mousewheel”坐标是
  相反，因此在“ mousewheel”上向下滚动为正时，
  对“轮子”不利，反之亦然