Ok, so I've created a little plugin that takes a bunch of elements and creates a sort of never ending list. I'll try to explain...

I have a div, and it's got about 20 elements tags in it. When the user scrolls up, the top element moves out of view and is moved to the bottom of the list. And vice-versa so that when the user scrolls down, the bottom element is moved to the top of the list.

This is specifically for Mobile Safari (iPad, iPhone) web content and you can see the work in progress here...

http://appliedworks.co.uk/files/times/SVGTests/drumView/drum.html

You'll need an iPad or iPhone top see the scrolling in action.

You can see the plugin code here...

http://appliedworks.co.uk/files/times/SVGTests/drumView/drumView-0.1b.js

What I would like to do is implement inertia so the scrolling slows to a halt in response to how fast or slow the user is scrolling when their finger leaves the screen. Just like the inertia commonly found in the iPhone / iPad UI.

The problem is, every time an element moves to the top or the bottom of the list, the scollTop value for the parent div is adjusted to make it look like all the elements are staying in the same place. Which means the scrollTop value is never more than the top elements total height. So there's no value I can think of that I can keep on manipulating to give the illusion of inertia.

I'm stumped. Does anyone have any suggestions?