Getting 1px scroll increments for firefox

JavaScript
1

Hi all,

I’ve noticed that when you are getting the scrollTop() property of the scrolled element with jQuery, Firefox returns increments higher than one pixel (these are the ratio between the height of the scroll drag area and the height of the content, so what for the scroll-bar would be 1px dragged for the content would be 5px scrolled if the content was five times taller than the scroll-bar…). Safari and Chrome seem to normalize this event by returning every pixel increment, I haven’t even tested yet in IE but I’m not optimistic.
I’m building a website with a parallax effect similar to this one http://www.nikevision.com/, in which the animation timeline is basically the scroll area and in order for the animations to be smooth(er) I’m missing the 1px scroll increments in Firefox. I’ve thought of ways of coding a custom scroll-bar with which I could always get that one pixel increment but I’m not quite sure how to do it.
Maybe there is a way of taming Firefox…

Many thanks in advance for your help,
Andres

2

I think I found a clue by having a look again at that website. You will notice the scrollable area is so big by looking at the height of the scrollbar but when you scroll it does not seem that much…

3

Do you get a scrollbar on that site? I get one only on IE.

If you get an increment >1 reported, call a routine that steps through that distance one pixel at a time.

4

Thanks for the reply, was trying your suggestion but it’s crashing the browser. I’m surely not implementing it well but I think in any case this would be a bit overkill. I think the best would be to multiply the scrollable area height by the ratio but trick the content into scroll only a given amount so that I can get those 1px increments