Clever Geek Handbook

Disable scrolling but capture scrolling data using JavaScript?

I am trying to prevent the default scrolling behavior while still detecting the number of pixels the user tried to scroll.

My goal (at some vertical position on my page) is to fix the nav at the top of the screen and capture the scroll / scroll event to pull the mobile menu when the user scrolls the fallback (so moving the mentioned item up and down n pixels depending on how many pixels the user is trying to scroll).

I'm aware of UX / accessibility issues as they block behavior, but suits want what suits want.

So far I have:

$('body').on({
 'mousewheel' : function(e) {
    e.preventDefault(); 
    e.stopPropagation();
 }
});

but I don't understand how to access the number of scrolled pixels (since item / scroll offsets are no longer a guideline).

Edit: Please note that this question specifically asks for information about mouse / scroll actions during scroll blocking. Do not assume that this has been appropriately labeled as duplicate.

+3


source to share


2 answers


It is browser dependent due to the event mousewheel

you are using. This is because it is non-standard . Don't use it!

In Chrome (43.0), you get different properties with different values:

e.originalEvent.wheelDelta: -120
e.originalEvent.wheelDeltaY: -120
e.originalEvent.deltaY: 100

In IE (11.0), you can only get one property:



e.originalEvent.wheelDelta: -120

In Firefox (38.0.5), capturing the mousewheel event doesn't work at all.

Solution:
Use event wheel

( MDN link ). This event has a property e.originalEvent.deltaY

in all browsers.

+5


source


Before canceling the propagation of the event, take deltaY from the original event like this



$('body').on({
  'wheel' : function(e) {
      console.log(e.originalEvent.deltaY);
      e.preventDefault(); 
      e.stopPropagation();
 }
});
+2


source






More articles:


All Articles