Advertisement
  1. Code
  2. Mobile Web Apps

iOS 5: posicionamiento fijo y desplazamiento de contenido

by
Read Time:6 minsLanguages:

Spanish (Español) translation by Valentino (you can also view the original English article)

Dos de las mejoras más famosas de Safari en iOS 5 son el posicionamiento fijo y la compatibilidad con el desplazamiento de contenido. Este tutorial te enseñará cómo aprovechar este cambio y cuáles son las implicaciones para las bibliotecas de JavaScript provisionales como iScroll.


En un tutorial anterior, hablé sobre iScroll y cómo este pequeño y fantástico complemento ayudó a solucionar un problema con iOS Webkit (5.0 y anterior) y Android Webkit (2.1 o inferior), en el que no había soporte nativo para posicionamiento fijo o áreas de contenido desplazables. .

Entonces, después de un fin de semana de ejecutar varias pruebas, es bueno confirmar que la actualización de iOS 5 Safari ahora aborda estos dos problemas y ahora tenemos soporte nativo completo para ellos. Ha estado en trámite durante algún tiempo en términos de las versiones beta para iOS 5, pero nunca puedes garantizar que estas cosas lleguen a la versión final.

En este tutorial, discutiré este cambio en profundidad y también te enseñaré cómo convertir el proyecto iScroll de nuestro tutorial anterior para usar las nuevas propiedades CSS.


¿Qué significa este cambio?

Para ser explícitos, ahora tenemos la capacidad de crear aplicaciones web que tienen encabezados y pies de página fijos usando la posición: contenido fijo y desplazable entre el uso de -webkit-overflow-scrolling.  Esto nos permite crear aplicaciones con una sensación más nativa sin necesidad de recurrir a un complemento de terceros, como iScroll. Sin embargo, como verás, por ahora todavía hay algunas buenas razones para depender de bibliotecas de terceros como iScroll.


Las advertencias

Si bien este cambio es una gran noticia para los desarrolladores web, hay algunas advertencias que vale la pena discutir.

Primero, el más obvio es que esta función actualmente solo es compatible con Safari 5.1. Si bien el nuevo 4S ha tenido pedidos anticipados récord, y muchos usuarios anteriores ya se han actualizado a iOS 5, es probable que todavía haya una cantidad sustancial de usuarios de dispositivos iOS en 5.0 o menos.

A continuación, actualmente no hay forma de eliminar la barra de desplazamiento que aparece en el costado del área de contenido. Podrías intentar hacer algo con el método CSS de webkit-scrollbar para cambiar colores, etc., pero no veo esto como un problema masivo.  La barra de desplazamiento es un buen elemento de interfaz de usuario que hace que el usuario sepa dónde se encuentra en el documento. ¿Por qué molestarte en quitarlo?

Otro problema: no hay forma de definir el área de 'bandas elásticas' del navegador, ya que solo formará una banda elástica en la parte superior e inferior del área de la pantalla, incluida la barra de direcciones. Había comenzado a trabajar en un poco de JavaScript para compensar manualmente el valor de scrollTop en cada extremo en 1, pero luego descubrí que Joe Lambert ya lo había hecho con scrollFix.js.

Finalmente, el impulso de desplazamiento actualmente no tiene control de velocidad. Sería más agradable tenerlo.

Ya es suficiente con los problemas, ¡echemos un vistazo a cómo podemos comenzar a usar el CSS recién admitido!


Paso 1. Elimina el JavaScript

Echemos un vistazo a cómo convertir nuestro proyecto anterior para usar las nuevas reglas CSS. Usaremos nuestra página construida previamente con iScroll para la demostración.

Lo primero que debes hacer es eliminar la inclusión de JavaScript y la llamada iScroll de la parte inferior del documento, de modo que termine con un archivo HTML y CSS simple como el que se muestra a continuación:


Paso 2. Ajusta el CSS

No necesitamos cambiar nuestro HTML en absoluto. Solo necesitamos ajustar algo de nuestro CSS y agregar una nueva clase.

Esta es la nueva clase que se introdujo alrededor de la beta 2 de iOS 5, y es la que nos da el buen impulso de desplazamiento.  De forma predeterminada, está configurado en automático, lo que le da al desplazamiento un aspecto y una sensación rígidos. Para darle a tu área de desplazamiento una sensación más nativa, configura esta propiedad para tocar.

Ahora, aplica este estilo al div de contenido de desplazamiento y vamos a eliminar algunos de los estilos del contenedor, principalmente el posicionamiento y el desbordamiento.  De hecho, realmente no necesitamos el div contenedor en absoluto, por lo que puedes eliminarlo si lo deseas, pero me gusta tener un div alrededor solo para envolver cualquier cosa si es necesario. Las dos reglas CSS deberían verse a continuación:


Paso 3. Arreglar el encabezado y el pie de página

Antes, teníamos el encabezado y el pie de página establecidos en absoluto (como fijo no era compatible). Ahora podemos seguir adelante y colocarlos en el CSS usando la regla fija para evitar que se desplacen en la pantalla.

Si no conoces la diferencia entre el posicionamiento fijo y el posicionamiento absoluto, la versión corta es que el posicionamiento absoluto es una posición definida en relación con su elemento principal. El posicionamiento fijo es una posición fija dentro de la ventana gráfica.

Ahora tendrás un área de desplazamiento con un encabezado y pie de página fijos, ¡sin el uso de Javascript!


El futuro

Será agradable cuando otros navegadores se pongan al día (¡en el teléfono con ventana te estoy mirando!) Y la mayoría de los usuarios tienen un sistema operativo Android superior a 2.1, pero en el futuro cercano deberían ver algunas mejoras agradables en los navegadores basados ​​en webkit.  Con el aumento de la velocidad en cada iteración, las aplicaciones creadas con tecnologías basadas en la web podrían superar rápidamente a las aplicaciones nativas. ¡Todo lo que necesitamos ahora son más API nativas!


¿Dónde deja esto iScroll?

iScroll todavía tiene un lugar en este momento. Hay muchos parámetros que podemos pasar al método de desplazamiento para dar algunas opciones adicionales a la forma en que nuestro desplazamiento funciona y se ve que actualmente no se pueden lograr sin escribir JavaScript personalizado ... entonces, ¿por qué no usar lo que ya está disponible?

También está el problema de la compatibilidad con el navegador. Tal vez realmente necesites las barras de herramientas fijas para tu proyecto en implementaciones anteriores del navegador webkit. Bueno no hay problema.  Si es lo mejor para el proyecto, entonces no hay vergüenza en usar una de las bibliotecas de JavaScript existentes para lograrlo. Sin embargo, sugeriría usar la implementación nativa siempre que sea posible.

Yendo más allá de la simple funcionalidad de desplazamiento, la biblioteca iScroll también ofrece una gran funcionalidad complementaria como "Tirar para actualizar", "Pellizcar / Zoom" y "SNAP / Ajustar a elemento". Podemos cubrirlos en un tutorial de iScroll posterior, ya que siguen siendo características útiles y relevantes.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.