javascript - Phonegap 3.0 - Android: Native Scrollbar Not Visible

Question

I am currently converting the scroll behavior on a very large PhoneGap application from a third party JavaScript scrolling library to native scroll. Everything has gone smoothly, except that the native scroll on the Android version never displays a scrollbar.

The scroll behavior works correctly, but no scrollbar is displayed to give the user feedback about the scroll position on a screen.

I suspect that this is some sort of configuration or CSS problem, but I have tried modifying CSS and other Android configuration files such as the manifest and activity files to no avail.

How do I enable a visible scrollbar using native scroll on PhoneGap Android?

Note: I am not interested in a third party scrolling solution (such as iScroll). The conversion from iScroll is already 90% done with the exception of the visible scrollbar problem on Android.

Answer 1

I was able to accomplish this myself by using Webkit scrollbar CSS that only gets applied on Android. I add the android-scroll-bar class to the page on Android by using

$('html').addClass('android-scroll-bar');

Here is the necessary CSS:

.android-scroll-bar ::-webkit-scrollbar {width: 5px;}

.android-scroll-bar ::-webkit-scrollbar-track { border-radius: 10px;}

.android-scroll-bar ::-webkit-scrollbar-thumb { border-radius: 10px; background: rgb(169,169,169); }

.android-scroll-bar ::-webkit-scrollbar-thumb:window-inactive {background: rgb(128,128,128); }