How to hide grey scrollbars on a DIV in Android -

问题:

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.

回答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....

回答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 }