A problem of trying to implement scrolling inertia with jQuery
- by gargantaun
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?
