Question

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

大多数浏览器都会按照预期的方式工作，而鼠标滚轮＃34;但是在Firefox上我必须使用＆＃34; DOMMouseScroll＆＃34;。

问题是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
    });
  }
});

更新：

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和所有其他浏览器上的新“轮子”。对于读者来说，只是注意“轮”坐标和“鼠标轮”坐标是相反，所以在“鼠标滚轮”向下滚动时是正的，这是 “轮子”否定，反之亦然

Answer 2

不是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');
    }
});

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

2 个答案: