A problem of 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 intertia is the difference betweent 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.

You can view the full source code (all in one page) or test it on your iPhone or iPad (or in the simulator) here

http://www.appliedworks.co.uk/files/times/swipegal.html

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));
...