Question

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?

Answer 1

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.