How many pixels are scrolled on a website with a mouse wheel down event?

Question

I'm working on writing a custom scrollbar and am catching the mousewheel event. I'm using this to then adjust the scrollTop of the element I want to scroll on.

Is there a standard number of pixels that are scrolled down, or does it vary from system to system?

I'm showing 114px in the latest build of Firefox:

Answer 1

Many mouse drivers let you set the distance scrolled by the mouse wheel, so there is not a standard distance. I'd try your code out for a while and pick a distance that keeps you from scrolling all day but doesn't jump a mile at each scroll. You'll kind of need to "feel" it out. Get friends to give feedback, it helps to let a few hands touch this kind of thing.

Answer 2

I have noted that in Google Chrome - that is 100px per mouse scroll

Answer 3

For Firefox, you have the MozMousePixelScroll event, which reports the number of pixels that should be scrolled in e.detail.

window.addEventListener('MozMousePixelScroll', function(e) {
    console.log(e.detail);
});

For many other browsers, you have the mousewheel event that reports e.wheelDeltaY, but they are not in pixels and you will have to guess the amount to be scrolled.

Also see how SproutCore handles scrolling in their own framework (they're writing their own scrolling view too): http://blog.sproutcore.com/scrolling-in-sproutcore/

Answer 4

You'll need to store the current scroll position before the scroll and then when you detect a scroll get the distance travelled me thinks.