Scroll infinito con History API HTML5
La constante evolución del diseño web, hace que cada vez tengamos más posibilidades de hacer más usables nuestras páginas web.
En esta ocasión Warpspire.com nos deja un claro ejemplo de cómo el HTML5 va a ser una revolución en el diseño web .
Todos aquellos que hayáis navegado por Twitter, habréis visto que no existe paginación. La página se va cargando de nuevo cada vez que llegamos al final del scroll. Esto permite no sobre cargar la página, ya que el contenido se va cargando paulatinamente y sobre todo hace mucho más fácil y rápida la navegación.
Lo mismo sucede si analizamos Facebook, donde podemos ver que también se renuncia a la paginación, utilizando también el scroll sin fin.
Esta API de HTML5 es verdaderamente útil y mejora aún más la navegación de Twitter y Facebook.
Si nos fijamos en sus navegaciones, podemos hacer un scroll infinito, pero la url no cambia, siempre es la misma, esto ¿qué supone?, pues que si quiero mandar una referencia de un scroll infinito a un amigo, al no haber una url que distinga ese punto concreto de la navegación, tendrá que ir buscando hasta encontrar dicha referencia.
El código que nos presenta Warpspire va modificando la url a medida que vamos bajando y recibiendo nueva información en nuestro navegador, con lo cual «problema resuelto».
Otra funcionalidad que aporta, igual de importante, es que si en medio del scroll infinito pulsamos sobre un enlace, luego podemos seguir utilizando el botón back del navegador regresando al mismo punto de partida, sin tener pues que volver a realizar todo el scroll.
¿Acabará el Scroll infinito con la paginación?, si y no.
Me explico. En el caso de un resultado de búsqueda, con un gran número de resultados, el scroll infinito te obliga a ir paso a paso hasta llegar a la zona intermedia o final, sin embargo, con una paginación puedes ir directamente a los últimos resultados ubicados en esas últimas páginas, agilizando claramente la navegación.
Lo ideal será poder utilizar esta API que no vuelve a recargar la página, que nos permite una navegación fluída, pero añadiendo la posibilidad de ir dando saltos mayores.
Aquí os dejo la dirección para ver el ejemplo y descargaros gratuitamente el código
