overflow: scroll en iOS

20/ago/2013 0

En desktop, para tener un elemento escroleable basta con que declares un alto fijo y defines overflow: auto | overflow: scroll y si el contenido interior es mayor que el alto aparecerá la barra de scroll automáticamente. En browsers móviles y tablets ocurre lo mismo pero la sensación es muy inferior ya que el touch/drag es errático y no incluye el movimiento elástico que estamos acostumbrado al scroll en estos dispositivos touch. En el siguiente video pueden ver claramente a lo que me refiero (en el cuadro de la derecha tiene aplicada la propiedad mágica):


-webkit-overflow-scrolling: touch

Esta propiedad creada por Apple especialmente para Safari Mobile permite precisamente lo que no es soportado por este navegador: crear un scroll a un elemento sin interferir en el el registro del touch dentro de la ventana misma del browser. En pocas palabras, permite un scroll interno (con momentum) dentro de una página que ya tiene un scroll genérico, ya que en dispositivos móviles el evento touch está asociado a la ventana completa. Esta propiedad fue agregada desde iOS 5.1.

Ver Ejemplo (en dispositivos touch)

Ejemplo

Links:

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab