2011-07-24 8 views

Respuesta

3

Scrollability por Joe Hewitt es una implementación desarrollada recientemente que hace un buen trabajo al imitar el desplazamiento nativo en dispositivos con iOS. Sin embargo, es por su propia admisión un "trabajo en progreso" y no está listo para el uso de producción.

Además, iOS 5 tendrá soporte directo de desplazamiento nativo a través de la propiedad -webkit-overflow-scrolling: touch CSS y valor. Establecer eso junto con overflow: scroll en un elemento hará que el desplazamiento se comporte como desplazarse por un panel en una aplicación nativa: un dedo, ímpetu de estilo nativo y comportamiento. Básicamente, todo lo que requiere una buena porción de JavaScript se puede reemplazar por dos propiedades de CSS.

La desventaja es que, ya que es sólo en la versión beta de iOS, que todavía tiene que utilizar un script como punto de retorno hasta que iOS 5 es corriente (no sólo en libertad), Android adopta (y que la liberación se convierte en la corriente principal) , etc. Vamos a necesitar un retroceso por un buen tiempo todavía.

Puede obtener más detalles en FunctionSource y this blog. De nuevo, esto no es útil hoy pero será útil en los próximos 6 a 12 meses (posiblemente más tiempo para otras plataformas).

+0

Thx mucho por su respuesta .. Sólo una pregunta, sin embargo .... Cuando u decir iOS 5 tendrá directa soporte de desplazamiento nativo a través de -webkit-overflow-scrolling: toque la propiedad CSS ..... ¿qué significa exactamente? ¿Significa que podemos aplicar esa propiedad a cualquier elemento, p. un div de altura fija ... En caso afirmativo, de todos modos conseguimos divs de altura fijos para desplazarnos en dispositivos IOS con 2 dedos incluso ahora ... ¿Podrían explicar esa parte ... como creo que IOS5 no está muy lejos. .. – testndtv

+0

pero la capacidad de desplazamiento hace que la página "rebote" (puede ver las cosas grises debajo de la vista web cuando está en safari mobile). que no parece nativo – Ben

4

Así que iOS 5 webkit ahora tiene desplazamiento nativo. Pero todavía tiene algunos problemas, especialmente si estás tratando de obtener una sensación de "aplicación".

El uso de este CSS activa el desplazamiento nativo.

.scrollme { 
    -webkit-overflow-scrolling: touch; 
    overflow:auto; 
} 

El problema es, si se arrastra hacia abajo cuando el div ya está en la "cima" de su contenedor, se termina con el conjunto de documentos HTML de desplazamiento de rebote, que puede exponer el cromo navegador cuando no lo hiciste No quiero que lo haga. Sin embargo, hay un CSS puro como solución alternativa (sin javascript). Puede usar un conjunto de 3 divs anidados. Con el 2 externo ajustado a "desplazamiento: toque", puede obtener una sensación bastante "nativa".

Código de ejemplo aquí: https://gist.github.com/1372229

Junto con la "posición: fijo" propiedad, esto va un largo camino para simplificar las cosas.

+0

puedo ver el cromo – Ben

Cuestiones relacionadas