Android :: Webview elimina la barra de desplazamiento para un DIV

Question

Hice una página web pequeña con un div desplazable. Cuando lo cargo en un navegador, funciona bien. Pero cuando lo cargo en una vista web dentro de Android, no me deja desplazar el div. ¿Hay alguna solución para esto o tengo que usar un diseño diferente? Estoy hablando de sitios web como this.

Answer 1

Desafortunadamente, los Div's desplazables no son compatibles con la mayoría de los navegadores Webkit móviles actuales. Una gran alternativa a la compatibilidad nativa es la biblioteca iScroll Javascript, que puede simular real de desplazamiento:

http://cubiq.org/iscroll

Copiar/pegar de la descripción del proyecto en esa página:

El desbordamiento: desplazarse para móviles webkit. El proyecto comenzó porque webkit para iPhone no proporciona una forma nativa de desplazar contenido dentro de un div de tamaño fijo (ancho/alto). Entonces, básicamente, era imposible tener un encabezado/pie de página fijo y un área central desplazable. Hasta ahora.

Versión 3.3 y posterior compatible con Android> = 1.5.

Answer 2

actualización (ya que este es uno de los resultados de la búsqueda n ° 1 en "barra de desplazamiento webkit androide"):
overflow:scroll está soportado en Android como de nido de abeja que creo. Seguramente v 3.2+ y multiplataforma también en iOS5 + y en BlackBerry Playbook.
No lo probé con webview en particular, pero supongo que como es compatible con el navegador nativo también debería ser compatible con la vista web.

Answer 3

Puede usar pseudo elementos de webkit para personalizar el estilo de la barra de desplazamiento.

Prueba esto:

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