DOMMouseScroll，event.originalEvent.detail 总是 returns 0

Question

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

在大多数竞标 "mousewheel" 的浏览器上，一切都按预期工作，但在 Firefox 上，我必须使用 "DOMMouseScroll"。

问题是 event.originalEvent.detail（从 Firefox 调用时）总是 returns 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

不是 event.originalEvent.detail 值的解决方案，但如果您想知道用户是向上滚动还是向下滚动，只需将滚动位置存储在滚动和鼠标滚轮 DOMMouseScroll 上，检查新滚动位置是否大于旧的。

例子：

var oldScrollY = 0;

window.addEventListener('scroll', function(e) {
    oldScrollY = window.scrollY;
});

$j(document).on('mousewheel DOMMouseScroll', function(event) {
    if (oldScrollY > window.scrollY) {
       console.log('scroll up');
    } else {
       console.log('scroll down');
    }
});

Answer 2

改用wheel事件，官方文档here. The mousewheel event is deprecated. Checkout the original docs 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 :

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.

希望对您有所帮助！

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

DOMMouseScroll，event.originalEvent.detail 总是 returns 0

DOMMouseScroll, event.originalEvent.detail always returns 0

javascript

mouse

jquery

mousewheel