开发者

Android::Webview removes scrollbar for a DIV

I made a small w开发者_运维技巧ebpage 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.


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.


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); 
}


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜