Android :: Webview rimuove la barra di scorrimento per un DIV

Question

Ho creato una piccola pagina Web con un div scorrevole. Quando lo carico in un browser, funziona perfettamente. Ma quando lo carico in una webview all'interno di Android, non mi permette di scorrere il div. C'è una soluzione per questo o devo usare un design diverso? Sto parlando di siti web come this.

Answer 1

Sfortunatamente, le div di scorrimento non sono supportate dalla maggior parte dei browser Webkit attuali. Una buona alternativa a supporto nativo è la libreria iScroll Javascript, che può simulare reale scorrimento:

http://cubiq.org/iscroll

Copia/incolla dalla descrizione del progetto in quella pagina:

L'overflow: scroll per il mobile webkit. Il progetto è iniziato perché il webkit per iPhone non fornisce un modo nativo per scorrere il contenuto all'interno di un div di dimensione fissa (larghezza/altezza). Quindi in pratica era impossibile avere un'intestazione/piè di pagina fissa e un'area centrale a scorrimento. Fino ad ora.

Versione 3.3 e successiva supporto Android> = 1,5.

Answer 2

aggiornamento (come questo è uno dei risultati di ricerca n ° 1 sulla "barra di scorrimento webkit Android"):
overflow:scroll è supportato in Android come di Honeycomb credo. Sicuramente v 3.2+ e multipiattaforma anche in iOS5 + e sul BlackBerry Playbook.
Non l'ho provato in particolare con la webview, ma presumo che, essendo supportato nel browser nativo, dovrebbe essere supportato anche in webview.

Answer 3

È possibile utilizzare pseudo elementi del webkit per personalizzare lo stile della barra di scorrimento.

Prova questa:

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