jquery - Mimic native scrolling using Javascript - Stack Overflow

admin管理员组

文章数量:1345179

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 mon is iScroll But i want to know more...

Please list as many as you could. Thank u.

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 mon is iScroll https://github./cubiq/iscroll But i want to know more...

Please list as many as you could. Thank u.

• javascript
• jquery
• iphone
• ios
• webkit

Share Improve this question Follow edited Jul 24, 2011 at 18:02 copenndthagen asked Jul 24, 2011 at 12:54 copenndthagencopenndthagen 50.9k105105 gold badges313313 silver badges491491 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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./1372229

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

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

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

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

本文标签： jqueryMimic native scrolling using JavascriptStack Overflow