Android :: Webview entfernt Bildlaufleiste für ein DIV

Question

Ich habe eine kleine Webseite mit einem scrollbaren div gemacht. Wenn ich es in einem Browser lade, funktioniert es gut. Aber wenn ich es in einem Webview innerhalb von Android lade, lässt es mich nicht das div scrollen. Gibt es dafür einen Workaround oder muss ich ein anderes Design verwenden? Ich spreche über Websites wie this.

Answer 1

Unglücklicherweise werden scrollbare divs auf den meisten aktuellen mobilen Webkit Browsern nicht unterstützt. Eine gute Alternative zu nativen Support ist die iScroll Javascript-Bibliothek, die reale Scrollen simulieren kann:

http://cubiq.org/iscroll

Copy/aus der Projektbeschreibung auf der Seite eingefügt:

Der Überlauf: blättern für mobile Webkit. Projekt gestartet, weil Webkit für iPhone keine native Möglichkeit bietet, Inhalte innerhalb einer festen Größe (Breite/Höhe) zu scrollen. Im Prinzip war es unmöglich, eine feste Kopfzeile/Fußzeile und einen scrollenden zentralen Bereich zu haben. Bis jetzt.

Version 3.3 und höher unterstützen Android> = 1.5.

Answer 2

aktualisieren (wie dies einer der n ° 1 Suchergebnisse zu "webkit Scrollbar android" ist):
overflow:scroll wird in Android unterstützt wie von Honeycomb glaube ich. Sicherlich v 3.2+ und Cross-Plattform auch in iOS5 + und auf dem BlackBerry Playbook.
Ich habe es nicht speziell mit Webview getestet, aber ich nehme an, da es im nativen Browser unterstützt wird, sollte es auch in Webview unterstützt werden.

Answer 3

Sie können Pseudoelemente von Webkit verwenden, um den Bildlaufleistenstil anzupassen.

Versuchen Sie folgendes:

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