Infinite Scroll sin botón en JS vanilla
Contenido del curso
Optimización de imágenes
Paginación
Almacenamiento local
Bonus
Próximos pasos
Infinite Scroll sin botón en JS vanilla
Infinite Scroll sin botón en JS vanilla
Contenido del curso
Jonathan Alfonso
Juan Castro
Profesor
Ameth Ordoñez Erazo
maximo galarza
Jonathan Alfonso
Guadalupe Monge Barale
fabio andres zamora osorio
David Estiven Aragón Andrade
Bramucci Candela
David Prado
maximo galarza
Daniel Salazar Munoz
Kevin Daniel Hincapie Lumbaque
Ernesto Alejandro Toledo Romero
Xavier Flores
Victor Andres Barilin
Juan Castro
ProfesorVictor Andres Barilin
Jorge Garcia
Dario Paladines
Nicolas Agustin Goitia
Eliezer Hernandez
Irving Juárez
Santiago Perozo
Harold Zurita Simon
Leonardo Jaimovich
Ariel Ezequiel Biazzo Genua
Sergio Javier Lopez Olivera
Passive lo que hace es evitar el llamado de preventDefault() en el caso de que este existiese en la función llamada por el Listener. En los navegadores que usa la gente normal el valor por defecto es false por lo que no se aplica, pero en el caso de Safari e Internet Explorer el valor por defecto es true. Por lo que supongo que es recomendable ponerle un valor para que el código se ejecute igual en todos los navegadores.
:clap:
No entendi...
esta clase la vi mas veces de lo que me gustaría admitir
Por lo que entendí al leer la documentación, el tercer parámetro que se le envía al EventListener es opcional y especifica las condiciones en la que se ejecuta el mismo.
addEventListener(type, listener, options);
Existen varias opciones, como use, signal, passive y capture, este último es el que se usa por defecto al colocar un valor booleano, como es el caso. Lo que determina capture es el orden en el que se ejecutan los eventos cuando existen varios que responden a la misma acción. Al estar en false el orden de ejecución es desde el padre del evento(por ejemplo un botón) a la raiz del árbol (DOM), y en el caso de ser true el orden se invierte, por lo que se priorizan los elementos más cercanos al DOM en orden jerárquico. Primero se ejecutan los eventos que tengan capture true(del más grande al más chico) y luego los false (del más chico al más grande). . Esta imágen me ayudo a entenderlo.
Capture phase = true Bubbling phase = false (por defecto) Target Phase = elemento "mas pequeño" que escucha al evento
documentación EventTarget.addEventListener()
Excelente explicación Muchas gracias
No habia entendido como funcionan y se relacionan los atributos clientHeight, scrollTop y scrollHeight. Leyendo los entendi asi que este es un resumen de como funcionan y se relacionan: . 1- document.documentElement.clientHeight: Devuelve la altura VISIBLE del elemento documentElement en pixeles incluyendo el padding del elemento pero no el border, ni el margin del elemento ni la barra de dezplazamiento horizontal del navegador. . Como clientHeight NO devuelve la altura total de un elemento sino la altura visible del elemento, entonces si el tamaño de pantalla del dispositivo se reduce o si el tamaño de la ventana del navegador se reduce entonces la altura visible del elemento tambien se reducira por lo tanto el valor de .clientHeight se reducira y visceversa.
. 2- document.documentElement.scrollTop: Devuelve el numero de pixeles desplazados al hacer scroll vertical en el elemento documentElement. . TENER EN CUENTA QUE SI EL TAMAÑO DE PANTALLA DEL DISPOSITIVO SE REDUCE O SI EL TAMAÑO DE LA VENTANA DEL NAVEGADOR SE REDUCE ENTONCES EL VALOR DE clientHeight SE REDUCIRA Y EL VALOR MAXIMO DE scrollTop AUMENTARA YA QUE AL REDUCIRSE LA VENTANA TOCA HACER MAS SCROLL PARA RECORRER EL ELEMENTO documentElement. SI EL TAMAÑO DE LA VENTANA DEL NAVEGADOR AUMENTA ENTONCES OCURRE LO CONTRARIO .
3- document.documentElement.scrollHeight: Devuelve la altura total del elemento documentElement en pixeles incluyendo el padding del elemento pero no el border, ni el margin del elemento ni la barra de dezplazamiento horizontal del navegador. . Si analizamos nos damos cuenta que la altura total del elemento documentElement es igual a la altura visible de dicho elemento mas el maximo de pixeles desplazados al hacer scroll vertical en dicho elemento, osea, documentElement.scrollHeight es igual a documentElement.clientHeight + documentElement.scrollTop cuando el valor de scrollTop es el maximo
Mi solución al reto del botón fue agregarle un "genericSection.removeChild('Element')" al evento del botón en la función de TrendingMovies y "Paginación"
Yo solucioné todo el problema del evento scroll usando
document.onscroll = () => getPaginatedMovies('trending/movie/day')
Por cada página, se llama a getPaginatedMovies con un endpoint diferente. Después se podrían hacer cosas como poner todos los endpoints en variables, llevar a document.onscroll a navigator, etc. pero no me compliqué mucho.
Me costo entender como implementar Infine Scroll en la navegación, pero ahí les va mi explicación:
let page = 1; let infiniteScroll;
function navigator() { console.log({ location }); if (infiniteScroll) { window.removeEventListener('scroll', infiniteScroll, { passive: false }); infiniteScroll = undefined; } if (location.hash.startsWith('#trends')) { trendsPage();
function trendsPage() { infiniteScroll = getPaginatedTrendingMovies; }
function navigator() { console.log({ location }); if (infiniteScroll) { window.removeEventListener('scroll', infiniteScroll, { passive: false }); infiniteScroll = undefined; } if (location.hash.startsWith('#trends')) { trendsPage(); if (infiniteScroll) { window.addEventListener('scroll', infiniteScroll, { passive: false }); } }
Así fue como entendí como aplicar infiniteScroll en la navegación. Espero que le haya servido a alguien esta explicación.
passive Un valor booleano que, si es true , indica que la función especificada por el listener nunca llamará a preventDefault() . Si un oyente pasivo llama a preventDefault() , el agente de usuario no hará nada más que generar una advertencia en la consola. Si no se especifica, el valor predeterminado es false , excepto que en navegadores que no sean Safari e Internet Explorer, el valor predeterminado es true para los eventos wheel , rueda del mousewheel , touchstart y touchmove . Consulte Mejorar el rendimiento del desplazamiento con oyentes pasivos para obtener más información.
Esta clase fue magistral, soprendido con cada segundo, el nivel es muy profesional
Para mi fortuna ya habia usado el clientHeight y el scrollHeight para mis carruseles de mi pagina de incio (hice un indicador de progreso de scroll), asi que al nombrarlo entendi de lo que hablaban... sin embargo me parece que se complico un poco todo XD pero de nuevo, para mi fortuna yo estoy haciendo mi pagina diferente, solo tengo en cuenta lo que hace el profe pero a estas alturas del proyecto no puedo aplicar muchas de las cosas tal cual el las propone, lo que en cierta forma significa un reto para mi cada nuevo "feature" y eso me agrada.
Mucha suerte compañeros y animo... les dejo un screenshoot de mi pagina de incio :3
A mi en lugar de hacer tantos cambios para el infiniteScroll, me funcionó simplemente envolverla en una función flecha:
window.addEventListener('scroll',()=>infiniteScroll());
con eso me ahorré la lógica de remover el listener
estas creando infinitos eventos que afectarian tu perfomance.
yo lo hice un poco distinto, espero que no este mal, use otro intersection observer que vea el footer, funciona perfecto, pero a lo mejor juan no lo uso por algun motivo
¡Me gusta la idea! ¿Puedo ver tu código?
Claro que si, aqui les dejo el link a mi repositorio por si quieren ver mas cosas
en mi reto mi app no es para moviles y todas las peliculas cargan dentro de un div con tamaño fijo... estuve pensando como hacer hasta que recorde la herencia, y el div tiene los mismos parametros scrollTop, ScrollHeight (el clientHeight es el tamaño del div que le pones en css), y funciona igual y es mas exacto, y si quieres usar las misma logica dle profe usa height:auto en tu css
Porque cuando asignamos la variable infiniteScroll a la función de la paginación no la ejecutamos directamente, sino ejecutamos el infiniteScroll() en el eventListener
function trendsPage(){ . . . infinite = getPagesTrend //porque no ejecutamos aqui lA FN }
En el minuto 13:10 lo explica el profe. Solo le asigna el valor de la función; porque el evento: window.addEventListener('scroll', infiniteScroll, false); es el que va a ejecutar la función en si.
Tengo dos preguntas sobre algunas instrucciones agregadas en el proyecto: .
El evento de scroll no me gusta, ya que todo el tiempo se andan haciendo validaciones que restan mucho poder de computa en la app. Yo creo que el intersectionObserver es una mejor tecnica. Solo agregamos este observador en la ultima pelicula y cuando lleguemos ahi, que cargue más peliculas
Tienes razón, de esa manera que mencionas se gestiona mejor los recursos y encima es mas fácil de implementar
Al sumar estas dos propiedades, obtienes la posición vertical del borde inferior de la ventana del navegador en relación con el documento completo. Cuando esta suma es igual al valor de document.documentElement.scrollHeight (la altura total del documento), significa que has alcanzado el final del documento, es decir, el usuario se encuentra en la parte inferior del documento y no hay más contenido por desplazar hacia abajo.
document.documentElement.scrollTop + document.documentElement.clientHeight
yo implementaría el scroll infinito como una proporción de scrollTop + clientHeight sobre scrollHeight. Es decir porejemplo cuando represente un 85% o 90%, ahi disparar la api para la próxima página
Y si como otra posible solucion habriamos agregado un "div " invisible como lastChild sea cual fuere la seccion que estemos, y un intersection observer que si intersecta al div hacemos el llamado de la funcion?
dentro de la función trendsPage() en el archivo de Navigation.js construí esto al final:
let counter = 1 window.addEventListener('scroll', () => { const { scrollTop, clientHeight, scrollHeight } = document.documentElement; const scrollIsBottom = (scrollTop + clientHeight) >= scrollHeight - 15; if(scrollIsBottom){ counter++ getTrendingMovies(page = 1 + counter) } //this way we make sure we're loading new content only when the scrollIsBottom results TRUE and at the same time we're at the bottom of the page })
Así cada vez que se haga scroll crearemos esas variables y la validación para llamar a getTrendingMovies con el counter (que es un número que aumentará en 1 cada vez que llamemos esta función). Además cada vez que nos remitamos a esa pagina de tendencias no cargará todo completamente sino que volverá a cargar solamente las 8 películas iniciales