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

Question

我正在编写一个简单的 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
      });
    }
  });
})();

您还有其他建议吗？谢谢

Answer 1

改用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
    });
  }
});

Update :

Chrome、Firefox 和其他著名浏览器支持 deltaX 和 deltaY 属性，只需检查上面提到的 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.

希望这有帮助!

Another Update

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

根据OP的意见

Doesn't work on Safari so I use the old function with "mousewheel" on Safari and the new "wheel" on all other browsers. For readers, just note that "wheel" coordinates and "mousewheel" coordinates are opposite, so while scrolling down is positive on "mousewheel", it's negative on "wheel" and vice-versa