Trying to implement scrolling inertia with jQuery

Question

I'm trying to add some iPhone style scrolling inertia to a web page that will only be viewed on the iPad.

I have the scrolling working in one direction (scrollLeft), but it doesn't work in the other direction. It's a pretty simple function:

function onTouchEnd(event){
                event.preventDefault();
                inertia = (oldMoveX - touchMoveX);
                
                // Inertia Stuff
                if( Math.abs(inertia) > 10 ){

                    $("#feedback").html(inertia);
                    
                    $("#container").animate({
                        'scrollLeft': $("#container").scrollLeft() + (inertia * 10)
                    }, inertia * 20);
                    
                }else{
                    
                    $("#feedback").html("No Inertia");
                    
                }
                
            }

I've bound it to the touchend event on the body. The inertia is the difference between he old moveX position and the latest moveX position when a touch ends.

I then try to animate the scrollLeft property of a div that contains a bunch of thumbnails. As I've said, this works when scrolling to the left, but not when scrolling to the right.

Any ideas?

Answer 1

the 2nd argument to "animate(...)" is the duration, which must not be negative.

try:

...
$("#container").animate({
      'scrollLeft': $("#container").scrollLeft() + (inertia * 10)
   }, Math.abs(inertia * 20));
...