How to hide grey scrollbars on a DIV in Android - they only show when you cannot scroll

Question

I have a simple HTML/Jquery app compiled with Phonegap Build v3.1.0. I am using a DIV with style="width:100%;overflow:scroll;" to allow users to scroll content inside the DIV without scrolling the main page.

When the DIV's content is small (no scrolling possible) there are thin grey lines on the right and bottom edge of the DIV. They do not touch. I am testing on a Nexus 7 running Android 4.4.2.

When the content inside is large enough, the bars disappear and the scrolling performs as expected.

How can I remove the gray lines? They overlap the content inside the DIV and ruin the appearance without being useful.

Note I am compiling with Phonegap Build online (not creating the .apk on my local machine with eclipse). All I can do is edit config.xml or my CSS.

Answer 1

Thankfully a friend pointed this out to me.

#whatever::-webkit-scrollbar {display:none;}

It's annoying that the 'scrollbars' in question are no use whatsoever....

Answer 2

If you only want the scrollbars to appear when the content is too long for the container use overflow: auto

For example if you have a div with content that you want to scroll only in y-direction use:

.class { overflow-x: hidden; overflow-y: auto }