CODEWITHSUNDEEP
javascriptjquerymousewheel
tskuzzy
tskuzzy

Reputation: 36476

Get scroll wheel amount in jQuery

After binding the scroll event to an object, how can I get the amount the user scrolled by?

$(selector).scroll(function(e) {
    // get scroll amount
});

Firefox and Opera have the property detail whereas IE, Safari, and Opera have wheelData. To make matters worse, Firefox and Opera operate on a scale of -3 to 3, and IE and Safari go from -120 to 120.

Is there a single, normalized property that jQuery provides for this?

Upvotes: 8

Views: 10838

Answers (2)

snies
snies

Reputation: 3521

Use jQuery .scrollTop() and save the value between scroll events, then get the delta at next scroll event.

var old_scroll_top = 0;

$(document).scroll(function() {
  var current_scroll_top = $(document).scrollTop();
  var scroll_delta = current_scroll_top - old_scroll_top;

  // do something with current_scroll_top and scroll_delta

  old_scroll_top = current_scroll_top;
});

Example: jsFiddle


Update:

Here is a second Example, which shows how to have a canvas, that updates according to scoll Events.

Upvotes: 10

ply
ply

Reputation: 1141

Could you use scrollTop for this?

var amount = $(window).scrollTop();

Upvotes: 0

Related Questions