Android overflow scrolling not working?

Question

yupp, I am one of those guys who want to develop mobile applications with HTML5. On Android and iOS. Sounds crazy, I know. Sorry, I have a problem ...

I have a classic app with a footer and a header, as well as content that needs to be scrolled. On iOS, it works fantastic! The header and footer have a "position: fixed" to the top / bottom level, and the content uses its own scroll impulse using "-webkit-overflow-scrolling: touch;". I know that "-webkit-overflow-scrolling: touch;" not available on Android, but this property is not only ignored, scrolling does not work at all!

So, please, someone tell me how to get the “native” scroll on iOS and the “good” scroll on Android with the same layout and style? For instance. if I can use natural scroll with momentum - great if not simple scrolling.

Note. I only need to support the latest versions (without Android 2.3!), So I don't want JS-Fallbacks like iScroll 4.

.content { // no(!) scrolling on Android - why? overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; } 

JSFiddle: http://jsfiddle.net/bmJxN/

Thanks!

Answer 1

Sorry for sticking out the old post, but there seems to be no satisfactory answer, I thought I would add my 2cents to anyone who ends up here, like me.

Speaking about the general problem of scrolling in mobile WebApps, scrolling and dynamics in mobile browsers is a pain, because there are many different implementations depending on the platform: Android! = Chrome! = Safari! = Opera browser, etc. and Android <3 does not support scrolling and newer versions like iOS <5.

The situation is complicated and can be a problem for iOS, where most devices are on iOS 5 or 6, but this is a real problem with Android fragmentation.

To better understand this, you can read this .

To answer this, as you have already indicated, there are backups such as iScroll or more recently, Overthrow, so that you can better deal with your own JS implementations and reserves. More recently, the Financial Times team has published the FTScroller library, which also looks promising.

Now for your situation, if you want to support Android 4+ and iOS5 +, you should be able to work with momentum using only fixed positioning, and

 overflow: auto; -webkit-overflow-scrolling: touch; 

on your scrollable content (you do not need to specify "overflow-x: hidden" when using the auto property). If not, maybe you made a mistake in your fixed positioning or some other css layout property? (inherited details of the body, etc.).

UPDATE: I had to do this before posting my answer, but I just checked the script on my Nexus4 and your code really works in Chrome: this probably means that you tested on an older device without Android 4+ or with a browser that does not support the overflow property?

Side notes:

• note that while the default effect is active by default for android and iOS, this will be the specific momentum of the platform that will be applied: they are different from each other, unlike JS polyfill, which makes the platform independent of scrolling independent. In addition, on iOS, scrolling is much smoother than Android, although the situation has improved with newer devices and Android 4.0+ (before that it was painfully unsuitable for most heavy populated areas).
• In iOS, you will have a bounce effect, which is typical for the platform, but not on Android, since the native UX browser does not include this bounce effect (which is strange because this effect exists in other parts of OS UX, for example, settings). You can achieve this on Android using the library, but beware of the uncanny valley.
• Other problems exist even in newer browsers, such as the lack of a scroll position indicator in Android browsers, as indicated here: http://barrow.io/overflow-scrolling . On iOS, you may have a problem with the infamous effect of scrolling the rubber band over the entire page by scrolling inside certain elements, as described in " How do I disable the rubber band in the iOS network of the application? " You will have a similar pb for WP8 webApps.

All this suggests that something like scrolling is far from ideal in mobile WebApps, and this is even worse in WebViews in terms of performance (for example, when developing PhoneGap applications). Good luck

Answer 2

Adding an extra note due to behavior that does not appear to be properly explained elsewhere.

When using “overflow: auto” or “overflow: scroll”, Chrome for Android will only display scroll bar indicators on page load before escaping them (unlike typical desktop browsers). For complex issues, these numbers are so thin and translucent that they are easy to miss.

This may not be a problem for general page scrolling; however, losing scrollbars to indicate additional content is a serious UX problem when used to scroll areas of a page (for example, for full-page applications).

To fix this, you can add your own scrollbars. When using "overflow: auto", these scrollbars will be displayed only when the content exceeds the visible area (as on desktop browsers).

Add the following code to your CSS:

 ::-webkit-scrollbar-track { background-color: #F5F5F5; } ::-webkit-scrollbar { width: 12px; background-color: rgba(0,0,0,0); } ::-webkit-scrollbar:hover { background-color: rgba(0, 0, 0, 0.09); } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.3); border: 2px solid #F5F5F5; -webkit-border-radius: 100px; } ::-webkit-scrollbar-thumb:active { background: rgba(0,0,0,0.61); -webkit-border-radius: 100px; } 

You can also add vertical arrows with the code below. Similarly, horizontal arrows can be turned on by replacing the horizontal vertically.

 ::-webkit-scrollbar-button { width: 12px; height: 12px; background-color: #F5F5F5; background-size: 100%; } ::-webkit-scrollbar-button:vertical:increment { background-image: url('../images/arrows/arrow-down.png'); } ::-webkit-scrollbar-button:vertical:decrement { background-image: url('../images/arrows/arrow-up.png'); } 

Please note that the last two lines require images of arrows, but could not add them to the message (possibly due to their small size).

Other scroll properties can also be customized. The guide below provides a detailed explanation:

http://poselab.com/en/custom-scrollbars-in-webkit/

Answer 3

Now it will work, there are many reasons for this. To achieve this, you can use any third-party library. I used one of the open source libraries from github to get the result: - The library is here

Hope this will be helpful ...