Como añadir un scroll infinito a tu página web sin usar jQuery, solo vanilla Javascript.

Últimamente, en mis proyectos personales estoy escribiendo mas javascript para el server side que para front end. Por lo que me estoy encontrando que cada vez que me pongo a escribir algo de javascript que va a ser utilizado en el front end, una cosa interior me dice que no use jQuery.

Sí, vas a escribir más líneas de javascript pero como que aprendes bastante más y te obliga a que tengas que comerte la cabeza en entender como el DOM está estructurado.

You might not need jquery, para que te acabes de convencer.

He estado re-haciendo algunas de mis repos en Github, en una de ellas usaba jQuery para hacer un efecto de infinite scrolling. He pensado que estaría bien tomar ventaja de las nuevas features de es6 y browserify para hacer este efecto.

Estructura del proyecto.

|--infiniteScroll
   |--dist/
   |  |--index.html
   |  |--bundle.js
   |  |--loadPosts.html
   |
   |--src/
   |  |--modules/
   |  |  |--httpRequest.js
   |  |  |--userAgent.js
   |  |
   |  |--main.js

Esta sería más o menos la estructura html que deberíamos tener:

Primero tendríamos que crear un modulo que sea el encargado de hacer la XMLHttpRequest para cargar el contenido que queramos mostrar en segundo lugar.

En el método responseListenerData, lo que hacemos es seleccionar aquellos elementos del documento que van a contener el nuevo contenido y también preparamos la estructura html que queramos que tenga este nuevo contenido.

El segundo modulo que vamos a hacer nos va a ayudar a saber con que navegador está visitándonos el usuario. Más que nada tenemos que hacer este paso porque cada vendor de navegadores tiene una implementación diferente en como calcular o saber cuando una página web ha llegado a su fin.

El siguiente paso consistiría en adjuntar todas las piezas para que esto funcione. Primero de todo lo que tenemos que hacer es importar los otros módulos que hemos creado antes.

En el método checkHeightBody, lo que hacemos es pasar como parámetro el objeto navigator de cada usuario para averiguar cual es, ahora lo que queremos hacer es aplicar uno de los métodos importados sobre el userAgent dependiendo del navigator. Ese es el resultado que devuelve este método.

loadInfiniteScroll será usado como callback al event listener que le añadiremos al evento scroll. Dentro de este método es donde comprobaremos si el usuario llega al fin de la página para hacer la http request y añadir el contenido que queramos.

Ahora hay que convertir todo este código en algo que los navegadores web entiendan. Pare eso tenemos browserify, el cual require tener instalado node js.

Este proceso se hace en el terminal, para instalar browserify:

npm install -g browserify

Y este sería el comando a ejecutar para convertir el código es6 a es5:

browserify src/main.js -o dist/bundle.js -t [ babelify --presets [ es2015 ]]

Necesitas tener varios npm packages instalados para que funcione, visita la repo de github para verlo :)

Y este sería mi ejemplo de como hacer el efecto de scroll infinito sin jQuery. Estaría encantado de oír sugerencias!

Aquí tienes los links de github:

Version es6

Version es5

comments powered by Disqus