javascript - mousewheel e.delta not working right in firefox?

Question

I'm making a single-page website that reacts to mouse wheel events.

    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);

So this works perfectly in chrome and safari but in firefox, both directions of the mouse wheel activate slideDown() function. As opposed to declaring slideUp when the mouse wheel goes up and slideDown when it's going down. Any ideas how to fix it?

Answer 1

This is because you normalize deltaY = 0 as down, and that you probably have some smooth-scrolling set-up in Firefox, or in your OS:

This smooth scrolling feature will make your delta get linearly smaller, until they reach 0. So, when you initiate a Wheel event from your mouse/scrollpad, it will often end with an event which deltaY will be 0.

You can check this theory with this modified code, which will output the cases where the deltaY is 0 separately.

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

Use your mouse wheel