Mimic native scrolling using Javascript

Question

Which Javascript libraries can be used to mimic the native scrolling behavior on an IOS device (mainky iPad) Even jQuery based libraries would be fine.

Also before u say, I know the most common is iScroll https://github.com/cubiq/iscroll But i want to know more...

Please list as many as you could. Thank u.

Answer 1

So IOS 5 webkit now has native scrolling. But it's still got some issues, especially if you're trying to get an "app" feel.

Using this CSS activates the native scrolling.

.scrollme {
   -webkit-overflow-scrolling: touch;
   overflow:auto;
}

The problem is, if you drag downward when the div is already at the "top" of its container, you end up with the whole html document scroll-bouncing, which can expose the browser chrome when you didn't want it to. However, there's a pure CSS a workaround (no javascript). You can use a set of 3 nested divs. With the outer 2 set to "scrolling:touch", you can get a fairly "native" feel.

Example code here: https://gist.github.com/1372229

Along with the "position:fixed" property, this goes a long way towards simplifying things.

Answer 2

Scrollability by Joe Hewitt is a recently-developed implementation that does a pretty good job of mimicking the native scrolling on iOS devices. However, it is by his own admission a "work-in-progress" and not ready for production use.

Additionally, iOS 5 will have direct native scrolling support via the -webkit-overflow-scrolling: touch CSS property and value. Setting that along with overflow: scroll on an element will make scrolling behave like scrolling a panel in a native app: one finger, native-style momentum and behavior. Basically everything that takes a good chunk of JavaScript can be replaced with two CSS properties.

The downside is that since it is only in the iOS beta, you still have to use a script as a fallback until iOS 5 is mainstream (not just released), Android adopts it (and that release becomes mainstream), etc. We will need a fallback for a good while yet.

You can get more details at FunctionSource and this blog. Again, this isn't of use today but will be useful in the next 6 to 12 months (possibly longer for other platforms).

Answer 3

Here is an interesting list of Touch and Touch-Scroll Javascript libraries:

https://github.com/bebraw/jswiki/wiki/Touch