Question

我正在创建一个单页网站，对鼠标滚轮事件作出反应。

    var supportsWheel = false;  
    function DoSomething (e) {
        if (e.type == "wheel") supportsWheel = true;
        else if (supportsWheel) return;
        var delta = ((e.deltaY || -e.wheelDelta || e.detail) >> 10) || 1;
        //if mousewheel is going up
        if (delta > 0) {
            slideDown();
        }
        //if mousewheel is going down
        else if (delta < 0) {
            slideUp();
        }
    }

    document.addEventListener('wheel', DoSomething);
    document.addEventListener('mousewheel', DoSomething);
    document.addEventListener('DOMMouseScroll', DoSomething);

所以这在chrome和safari中完美运行，但在firefox中，鼠标滚轮的两个方向都激活了slideDown（）函数。而不是在鼠标滚轮上升时声明slideUp而在它下降时声明slideDown。任何想法如何解决它？

Answer 1

这是因为你将deltaY = 0标准化为down，并且你可能在Firefox或操作系统中有一些平滑滚动的设置：

这种平滑滚动功能会使您的delta线性变小，直到它们达到0.因此，当您从鼠标/滚动条启动Wheel事件时，它通常会以deltaY为0的事件结束

您可以使用此修改后的代码检查此理论，该代码将分别输出deltaY为0的情况。

＆＃13;

var supportsWheel = false;

function DoSomething(e) {
  if (e.type == "wheel") supportsWheel = true;
  else if (supportsWheel) return;
  var e_delta = (e.deltaY || -e.wheelDelta || e.detail);
  var delta =  e_delta && ((e_delta >> 10) || 1) || 0;
  if (delta > 0) {
    slideDown();
  } else if (delta < 0) {
    slideUp();
  } else if (!delta) {
    donnotSlide();
  }
}

document.addEventListener('wheel', DoSomething);

function slideDown() {
  console.log('down');
}

function slideUp() {
  console.log('up');
}

function donnotSlide() {
  console.log('was zero');
}

＆＃13;

Use your mouse wheel

＆＃13;

但是说实话，我真的不明白为什么你会对这个delta信息进行标准化...通常你想对它的值作出反应。

mousewheel e.delta在firefox中无法正常工作？

1 个答案: