Mousewheel E.delta Not Working Right In Firefox?

I'm making a single-page website that reacts to mouse wheel events. var supportsWheel = false; function DoSomething (e) { if (e.type == 'wheel') supportsWheel = t

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

functionDoSomething(e) {
  if (e.type == "wheel") supportsWheel = true;
  elseif (supportsWheel) return;
  var e_delta = (e.deltaY || -e.wheelDelta || e.detail);
  var delta =  e_delta && ((e_delta >> 10) || 1) || 0;
  if (delta > 0) {
    slideDown();
  } elseif (delta < 0) {
    slideUp();
  } elseif (!delta) {
    donnotSlide();
  }
}

document.addEventListener('wheel', DoSomething);

functionslideDown() {
  console.log('down');
}

functionslideUp() {
  console.log('up');
}

functiondonnotSlide() {
  console.log('was zero');
}

Use your mouse wheel

But to say the truth, I don't really see why you do normalize this delta info... Usually you want to react to its values.