Desplazamiento infinito en JavaScript
El desplazamiento infinito es una técnica de diseño web que carga contenido continuamente a medida que el usuario se desplaza hacia abajo en la página. Esto eliminará la necesidad de paginación.
El éxito del desplazamiento interminable en los sitios de redes sociales como Twitter popularizó esta técnica, pero eso no significa que debas usarla.
El desplazamiento continuo es beneficioso para el contenido que se transmite constantemente y tiene una estructura relativamente plana, donde cada unidad de contenido pertenece al mismo nivel de jerarquía y tiene posibilidades similares de ser interesante para los usuarios.
En la publicación de hoy, aprenderemos sobre el desplazamiento infinito en JavaScript.
Desplazamiento infinito en JavaScript
La propiedad onscroll del mixin GlobalEventHandlers es un controlador de eventos que maneja eventos scroll.
El evento Scroll se genera cuando el usuario, una API web o el agente de usuario han desplazado la vista del documento o un elemento.
Sintaxis:
target.onscroll = functionRef
El functionRef es un nombre de función o una expresión de función. La función toma un objeto UIEvent como único argumento.
Solo puede asignar un controlador onscroll a un objeto a la vez.
Si se requiere más de un controlador, puede usar el método EventTarget.addEventListener() en su lugar y pasar el evento scroll al oyente. Puede encontrar más información sobre window.onscroll aquí.
Entendámoslo usando un ejemplo.
<body>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
<p>Hello world!</p>
</body>
var body = document.querySelector('body');
body.onscroll = function() {
if (window.scrollY > (document.body.offsetHeight - window.outerHeight)) {
console.log('It\'s working!');
body.style.height = document.body.offsetHeight + 100 + 'px';
}
}
En el ejemplo anterior, hemos definido una etiqueta de 10 párrafos dentro del cuerpo del HTML DOM. Cada vez que se representa el cuerpo y el usuario se desplaza hacia abajo, verificamos la cantidad de píxeles que el documento se desplaza verticalmente actualmente.
Si es mayor que la altura del cuerpo y la altura de la ventana, añadiremos 100px a la altura actual del cuerpo. Ejecute el fragmento de código anterior en un navegador que admita JavaScript; imprimirá el siguiente resultado en la consola.
Producción :
"It's working!"
"It's working!"
"It's working!"
"It's working!"
"It's working!"
"It's working!"
....
Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.
LinkedIn