CODEWITHSUNDEEP
javascriptjquery
Delon
Delon

Reputation: 253

Disable scrolling but capture scrolling data with JavaScript?

I'm trying to prevent default scrolling behavior while still determining the number of pixels a user has attempted to scroll.

My objective is (at some vertical position on my page) to fix a navigation element to the top of the screen and hijack the scroll/swipe event to pull down a mobile menu when the user scrolls back up (so moving said element up and down by n pixels depending on how many pixels the user tries to scroll).

I am aware of the UX/accessibility concerns insofar as blocking native behavior, but the suits want what the suits want.

So far I have: 

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

but am stumped as to how to access the number of pixels scrolled (since element/scroll offsets are no longer a guide).

Edit: Please note that this question is specifically asking for information regarding mouse/scroll actions while scrolling is blocked. Don't think this has been appropriately marked as duplicate.

Upvotes: 3

Views: 651

Answers (2)

Moti Korets
Moti Korets

Reputation: 3748

Before cancelling event propagation take the deltaY out of the original event like this

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

Upvotes: 2

Raidri
Raidri

Reputation: 17560

This is browser-depended because of the mousewheel event 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 get only one property:

e.originalEvent.wheelDelta: -120

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

Solution:
Use the wheel event (MDN reference). This event has the e.originalEvent.deltaY property in all browsers.

Upvotes: 5

Related Questions