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改为使用活动，这里是官方文档。该mousewheel事件已弃用。在此处签出原始文档。

$(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.

希望这对您有所帮助！

另一个更新

似乎wheel在Safari浏览器上使用了该事件的警告

根据OP的意见

在Safari上不起作用，因此我将旧功能与Safari上的“ mousewheel”一起使用，并在所有其他浏览器上使用新的“ wheel”。对于读者而言，只需注意“滚轮”坐标和“鼠标滚轮”坐标是相反的，因此，向下滚动在“鼠标滚轮”上为正，而在“滚轮”上为负，反之亦然