android - chrome - open browser smart tv

Error del navegador de Android? desplazamiento de desbordamiento div

Question

¿Se puede hacer que el contenido desbordado de un div deslizable en el navegador de Android?

Se puede desplazar en todos los demás navegadores modernos.

En iOS, es desplazable, sin embargo, no muestra barras de desplazamiento, pero sí es desplazable mediante el arrastre.

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

¿Se arreglará esto pronto?

Answer 1

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

Answer 2

Puede probar touchscoll.js para elementos div desplazables

Answer 3

Sólo para estar completo:

Las barras de desplazamiento están realmente en Android 2.3, pero tienen muchos errores y, por defecto, tienen un estilo de 0 ancho, por lo que son invisibles.

Puede hacer que sean visibles agregando estilo como:

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

Sin embargo, el elemento del pulgar no se puede arrastrar, solo puedes moverlo tocando la pista debajo o arriba.

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

Answer 4

overflow: scroll; es compatible con Android 3 (API 11).

Para una plataforma multiplataforma (concretamente iOS <= 4.3.2), cubiq.org/iscroll-4 es una cubiq.org/iscroll-4 fácil de implementar.

Answer 5

Android 3.0 y superior tienen soporte para overflow:scroll , on <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 un método de llamada cada vez que cambie el contenido de su sitio. El uso de la memoria también es un problema: en los dispositivos con poca potencia, el rendimiento puede demorarse debido a este tipo de rellenos múltiples.

Recomendaría un enfoque diferente: use Modernizr para detectar la compatibilidad con el desplazamiento por desbordamiento, agregue una clase a su etiqueta html y úselo para volver a escribir su CSS para que las páginas se desplacen "normalmente" en lugar de en un cuadro.

/* For browsers that support overflow scrolling */
#div {
height: 400px;
overflow: auto;
}
/* And for browsers that don''t */
html.no-overflowscrolling #div {
height: auto;
}