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 f

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/