Legend
Legend

Reputation: 116790

Android::Webview removes scrollbar for a DIV

I made a small webpage with a scrollable div. When I load it in a browser, it works fine. But when I load it in a webview inside Android, it doesn't let me scroll the div. Is there a workaround for this or do I have to use a different design? I am talking about websites like this.

Upvotes: 12

Views: 14192

Answers (3)

Verdigrass
Verdigrass

Reputation: 1301

You can use pseudo elements of webkit to customize the scroll-bar style.

Try this:

::-webkit-scrollbar {
    width: 12px;
}     

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}     

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0.4); 
}

Upvotes: 1

ABBDVD
ABBDVD

Reputation: 67

Update (as this is one of the n°1 search results on "webkit scrollbar android"):
overflow:scroll is supported in Android as of Honeycomb I believe. Surely v 3.2+ and cross platform also in iOS5+ and on the BlackBerry Playbook.
I didn't test it with webview in particular but I assume as it's supported in the native browser it should be supported in webview too.

Upvotes: -1

David Snopek
David Snopek

Reputation: 353

Unfortunely, scrollable div's just aren't supported on most current mobile Webkit browsers. A great alternative to native support is the iScroll Javascript library, which can simulate real scrolling:

http://cubiq.org/iscroll

Copy/pasted from the project description on that page:

The overflow:scroll for mobile webkit. Project started because webkit for iPhone does not provide a native way to scroll content inside a fixed size (width/height) div. So basically it was impossible to have a fixed header/footer and a scrolling central area. Until now.

Version 3.3 and later support Android >= 1.5.

Upvotes: 13

Related Questions