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.
精彩评论