Android :: Webview supprime la barre de défilement pour un DIV

Question

J'ai fait une petite page Web avec un div scrollable. Lorsque je le charge dans un navigateur, cela fonctionne très bien. Mais quand je le charge dans un webview à l'intérieur d'Android, il ne me laisse pas faire défiler la div. Y at-il une solution de contournement pour cela ou dois-je utiliser un design différent? Je parle de sites Web comme this.

Answer 1

Malheureusement, les div défilables ne sont tout simplement pas pris en charge par la plupart des navigateurs Webkit mobiles actuels. Une excellente alternative à un support natif est la bibliothèque iScroll Javascript, qui peut simuler le défilement réel:

http://cubiq.org/iscroll

Copier/coller à partir de la description du projet sur cette page:

Le trop-plein: faites défiler pour mobile webkit. Le projet a démarré parce que webkit pour iPhone ne fournit pas de façon native de faire défiler le contenu à l'intérieur d'une div de taille fixe (largeur/hauteur). Donc, fondamentalement, il était impossible d'avoir un en-tête/pied de page fixe et une zone centrale de défilement. Jusqu'à maintenant.

La version 3.3 et les versions ultérieures prennent en charge Android> = 1.5.

Answer 2

Mise à jour (comme cela est l'un des n ° 1 sur les résultats de la recherche "webkit scrollbar android"):
overflow:scroll est supporté dans Android comme de nid d'abeille je crois. Sûrement v 3.2+ et cross plate-forme également dans iOS5 + et sur le BlackBerry Playbook.
Je ne l'ai pas testé avec webview en particulier, mais je suppose que comme il est pris en charge dans le navigateur natif, il devrait également être pris en charge dans le webview.

Answer 3

Vous pouvez utiliser des pseudo-éléments de webkit pour personnaliser le style de la barre de défilement.

Essayez ceci:

défilement horizontal

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