Overflow Scrolling on Android doesn't work?

Question

yupp, I'm one of these guys who want to develop mobile apps with HTML5. On Android and iOS. Sounds crazy I know. Sadly I have a problem...

I have a classic app with a footer and header and a content which should be scrollable. On iOS this works fantastic! The header and footer have "position: fixed" to top/bottom and the content uses native scrolling momentum with "-webkit-overflow-scrolling: touch;". I know that "-webkit-overflow-scrolling: touch;" isn't available on Android, but this property is not only ignored, scrolling doesn't work at all!

So please can anyone tell me how to get "native" scrolling on iOS and "good" scrolling on Android with the same markup and style? E.g. if I can use native scrolling with momentum - great, if not - plain scrolling.

Note: I only need to support recent versions for now (no 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

Adding an additional note here due to behaviour that doesn't seem to be explained properly elsewhere.

When using 'overflow: auto' or 'overflow: scroll' Chrome for Android will display scrollbar indicators only momentarily on page load before hidding them (unlike the typical behaviour of desktop browsers). To compound matters these indicators are so thin and translucent they are easily missed.

This may not be an issue for general page scrolling; however, the loss of scrollbars to indicate additional content presents a serious UX problem when used to scroll areas of the page (such as for full-page apps).

To rectify this you can add custom scrollbars. When using 'overflow:auto' these scrollbars will only be shown when the content exceeds the visible area (just like 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 included by swapping vertical for horizontal.

::-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');
}

Note the last two lines require arrow images to be present, but was unable to add these to the post (probably due to their small size).

Other scrollbar properties can also be customised. The guide below provides a detailed explanation:

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

Answer 2

It will now work, there are lot of reasons for that. What you can do is use any third party library to achieve this task. I used one of the open source libraries from github to get the result :- The library is here

Hope it will be useful...

Answer 3

Sorry for digging up an old post but as there seem to be no satisfying answer I thought I would add my 2cents for anybody ending up here like me.

Talking about the general problem of scrolling in mobile WebApps, scrolling & momentum on mobile browsers are a pain as there is a wide variety of different implementations depending on the platform : Android browser != Chrome != Safari != opera etc, and Android < 3 does not support scrolling as well as newer versions, just like iOS < 5.

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

To get a better grasp at this, you could read this.

To respond to this, as you have already pointed out, there are fallbacks such as iScroll or more recently, Overthrow that you may handle better the native implems and JS fallbacks. More recently, the Financial Times team published the FTScroller library that looks also promising.

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

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

on your scrollable content (you don't need to specify "overflow-x:hidden" if using auto property). If not, you may have made a mistake in your fixed positing or some other css layout property ? (inherited body props etc).

UPDATE : I should have done this before posting my answer, but I just tested the fiddle on my Nexus4 and your code does work in Chrome : which probably mean that you tested on an older device without Android 4+ or with a browser that did no support the overflow property ?

Side notes :

• please notice that while the momentum effect is active by default on android & iOS, it's the platform specific momentum that will be applied : they differ from one another, contrary to a JS polyfill that makes scrolling momentum platform-independent. Also, on iOS, scrolling is much smoother than an Android, even though the situation got better with newer devices and Android 4.0+ (it was painfully unusable in most heavy populated views before that).
• On iOS, you will have the bouncing effect native to the platform, but not on Android as the native browser UX does not include this bouncing effect (which is weird because this effect exists in other parts of the OS UX, such as settings). You could achieve this on Android with a library, but beware of the uncanny valley.
• Other problems exists even on newer browsers, such as the absence of a scrolling position indicator in Android browsers as pointed out here : http://barrow.io/overflow-scrolling. On iOS, you may have a problem with the infamous "rubber band scrolling effect" on your whole page while having scrolling inside specific elements as pointed out in "How to disable rubber band in iOS web apps?". You will have a similar pb for WP8 webApps.

All this to say that something as simple as scrolling is far from perfect in mobile WebApps, and it's even worse in WebViews performance-wise (when developing PhoneGap apps for example). Good luck !