2011-11-04 12 views
30

¿Se puede desplazar el contenido de desbordamiento de un div en el navegador de Android?¿Error del navegador de Android? div desbordamiento de desplazamiento

Puede desplazarse en todos los demás navegadores modernos.

En iOS se puede desplazar, sin embargo, no muestra las barras de desplazamiento, pero se puede desplazar mediante el arrastre.

Un ejemplo sencillo: http://jsfiddle.net/KPuW5/1/embedded/result/

Será esto se solucionará en breve?

+2

Es un error: http://code.google.com/p/android/issues/detail?id=6864 Hay varias soluciones alternativas: http://cubiq.org/iscroll-4 Rather que estos hacks - el error debería ser reparado, con todo el bombo en torno al HTML, me sorprende lo mal que se implementa. – mercador

+0

esto parece estar arreglado ahora. algunos SDK no tienen las últimas vistas web y todavía pueden tener este problema, – neaumusic

Respuesta

3

Usted podría intentar touchscoll.js de elementos div desplazables

8

overflow: scroll; está soportado como de Android 3 (API 11).

Para una multiplataforma (es decir, iOS < = 4.3.2) Cubiq iScroll es una solución fácil de implementar.

-5

Puede hacer que un DIV sea desplazable en Android definiendo los estilos de la barra de desplazamiento en su CSS. En este artículo se mostrará cómo hacerlo: http://css-tricks.com/custom-scrollbars-in-webkit/

+0

. ¿Podría incluir aquí una breve muestra para evitar que esta respuesta sea inútil si/cuando ese enlace se apaga? –

+0

Esto muestra las barras de desplazamiento en Android 2.3, pero no hace que el div desplazable :( – Husky

+0

Husky, lo intento en un Android 2.3 y funciona mejor comportamiento varía en diferentes dispositivos Pruebe con esta aplicación web:.. Http://applications.frenys.com/webapp/ ? ref = dl y aplicación = 116815031665454 (debe tocar/click en la parte vacía de la pista barra de desplazamiento) – juamp

25

Android 3.0 y superior tienen soporte para overflow:scroll, en < 3.0 es otra historia. Puede tener cierto éxito con los polifills como iScroll, sin embargo, eso tiene un costo. Es difícil de implementar en sitios con diseños complejos, y necesita llamar un método cada vez que cambia el contenido de su sitio. El uso de memoria también es un problema: en los dispositivos ya poco potentes, el rendimiento puede retrasarse debido a este tipo de polyfills.

Recomendaría un enfoque diferente: use Modernizr para detectar compatibilidad con desplazamiento por desbordamiento, agregue una clase a su etiqueta html y utilícela para reescribir su CSS de forma que las páginas se desplacen 'normalmente' en lugar de en un recuadro.

/* For browsers that support overflow scrolling */ 
#div { 
    height: 400px; 
    overflow: auto; 
} 

/* And for browsers that don't */ 
html.no-overflowscrolling #div { 
    height: auto; 
} 
+7

Creo que su enfoque recomendado se basa en un concepto erróneo. 'prueba overflowscrolling' de Modernizr no es para saber si 'overflow: scroll' funciona en el navegador, pero si el navegador tiene soporte para la propiedad' * -overflow-scrolling' css, que es diferente. – speedarius

0

simplemente para la corrección:

Las barras de desplazamiento son en realidad existe en Android 2.3, pero son muy verde y por defecto Están decoradas tener un ancho de 0, por lo que son invisibles.

Puede hacerlos visibles mediante la adición de un estilo como:

::-webkit-scrollbar { 
    width: 30px; 
} 
::-webkit-scrollbar-track { 
    background-color: $lightestgrey; 
} 
::-webkit-scrollbar-thumb { 
    background-color: $lightgrey; 
} 

Sin embargo, el elemento de botón no es posible arrastrar, sólo se puede moverlo pulsando la pista por debajo o por encima de ella.

Además, estos estilos cambiarán el aspecto de sus barras de desplazamiento en todos los navegadores webkit, por lo que lo mejor es que agregue una clase que solo se aplique a Android 2.3.

Cuestiones relacionadas