CODEWITHSUNDEEP
androidcssscrollbarphonegap-build
Magnus Smith
Magnus Smith

Reputation: 5963

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

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.

Upvotes: 3

Views: 7215

Answers (2)

moritzwick
moritzwick

Reputation: 621

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 }

Upvotes: 5

Magnus Smith
Magnus Smith

Reputation: 5963

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

Upvotes: 12

Related Questions