jQuery Parallax Image Not Smooth When Scrolling With Mousewheel

Question

I have a site with a header image that I'm trying to use the parallax effect with.

I'm using the following JS to accomplish this:

    $(window).scroll(function() {
       var scrolledY = $(window).scrollTop();
       $('#container').css('background-position', 'left ' +  ((scrolledY)) + 'px');
});

I used an example from this fiddle: http://jsfiddle.net/QN9cH/1/

This works great when scrolling down the page by clicking and dragging the scrollbar, however when I scroll with my mousewheel the image jumps around a lot and it's not smooth at all.

I've done a lot of research and have tried solutions such as the one here: Javascript - Smooth parallax scrolling with mouse wheel

However, I'm not able to get this working with my implementation. I've tried several jquery libraries for smooth scrolling and haven't been able to get those to work properly either.

Is there a way I can make scrolling with the mouse wheel act the same as if I were scrolling manually by clicking and dragging the scroll bar?

Answer 1

This is not an answer (yet) but I've noticed that a large number of windows machines come with scroll wheels that "click", line-by-line, down the page.

I'm not sure if this is the issue you are facing but all of those beautiful parallax effects that work really well with expensive mice and those super-smooth Apple trackpads and mice, but then suddenly shudder and look awful on stock windows mice.