Using JQuery .scroll() to replicate a momentum based scroll panel that snaps to elements

Question

I am trying to upgrade the standard scrollable div overflow:scroll to me a more fluid element that furthermore will snap to the elements once the scrolling is completed.

I have a theory on how to do this but need assistance.

Modern browsers and operating systems, in particular Safari have a degree of momentum in the scroll anyway. What I would like to do is make it recognise when the scrolling animation is complete and then scroll a little further to snap to the elements li within.

Preferably I would like it to scroll smoothly right to the element that it snaps to. At the moment the scroll() feature of JQuery seams only to apply to the actual user scroll not any momentum that may follow.

iScroll does a pretty good job of this, but it is very big and bulky for our requirements and not backwards or internet explorer compatible.

Any ideas how we can achieve this.

Marvellous

Answer 1

This is actually pretty simple and can be achieved with jQuery; you can use jQuery's animate function to animate the scrolling (scrollTop), and set the easing function to easeOutElastic from this plugin http://james.padolsey.com/demos/jquery/easing/.

$('myButton').click(function() {
    $('myScroll').animate({scrollTop : XX},'easeOutElastic');
});