Cómo infinito desplazarse en JavaScript?

Mientras diseña una página web, la atención de un usuario importa mucho. Además de eso, crear una mejor experiencia de visualización de la página web en comparación con la paginación. En el otro caso, hacer que la página también sea compatible con dispositivos móviles que están disponibles para los usuarios "24/7". En tal caso, los escenarios, implementar un desplazamiento infinito en JavaScript es una gran funcionalidad que permite al usuario interactuar con "contenido"Convenientemente.

Este blog explicará el enfoque para implementar el desplazamiento infinito en JavaScript.

Cómo implementar el desplazamiento infinito en JavaScript?

El desplazamiento infinito en JavaScript se puede implementar utilizando los siguientes enfoques:

• "addEventListener ()" y "añadir Niño()" métodos.
• "inscroll"Evento y"ramillete" propiedad.

Enfoque 1: Desplácese infinitamente en JavaScript usando los métodos addEventListener () y appendChild ()

El "addEventListener ()El método se utiliza para adjuntar un evento al elemento especificado. El "añadir Niño()"El método agrega un nodo al último hijo del elemento. Estos métodos se pueden aplicar para adjuntar un evento a la lista y agregar los elementos de la lista como el último niño en ella.

Sintaxis

elemento.addEventListener (evento, oyente, uso);

En la sintaxis dada:

• "evento"Se refiere al evento especificado.
• "oyente"Señala la función que se invocará.
• "usar"Es el valor opcional.

elemento.AppendChild (nodo)

En la sintaxis anterior:

• "nodo"Se refiere al nodo a agregar.

Ejemplo
Sigamos el ejemplo declarado a continuación:

Lista de desplazamiento infinitamente

En el código anterior, realice los siguientes pasos:

• Incluir el encabezado declarado.
• Además, asigne el "identificación" llamado "Desplazarse"A la lista desordenada.

Pasemos a la parte JavaScript del código:

En el fragmento de código JS anterior:

• Acceder al "lista"Especificado antes por su"identificación" utilizando el "documento.QuerySelector ()" método.
• En el siguiente paso, inicialice la variable "agregar" con "1".
• Además, declare una función en línea llamada "scroll infinito()". En su definición, iterar un "para"Loop de tal manera que"20Los artículos están contenidos en una lista.
• Después de eso, cree un nodo de elemento llamado "li"E incrementarlo por"1"Refiriéndose a la variable inicializada"agregar"De modo que se adjunte al creado"lista"Cuando era niño usando el"añadir Niño()" método.
• En el código adicional, adjunte un evento llamado "Desplazarse". Tras el evento activado, se invocará la función establecida.
• Por último, en la definición de función, aplique las funcionalidades para detectar la lista cuando se desplaza a la parte inferior.

Para diseñar la lista, realice los siguientes pasos:

En las líneas anteriores, diseñe la lista y ajuste sus dimensiones.

Producción

De la salida anterior, se puede observar que los elementos se están incrementando de manera infinita y también lo es el desplazamiento.

Enfoque 2: Desplácese infinitamente en JavaScript utilizando el evento Onscroll con propiedad Scrolly

El "inscroll"El evento se desencadena cuando se está desplazando la barra de desplazamiento de un elemento. El "ramillete"La propiedad calcula y devuelve los píxeles que se consumen para desplazar un documento desde la esquina superior izquierda de la ventana. Estos enfoques se pueden utilizar para unir un evento al elemento del cuerpo y desplazarse aplicando una condición a los píxeles verticales.

Sintaxis

objeto.onScroll = function () código;

En la sintaxis anterior:

• "objeto"Se refiere al elemento a desplazarse.

Ejemplo
Sigamos los pasos establecidos a continuación:

Este es el sitio web de Linuxhint

En el fragmento de código anterior:

• Incluir el encabezado declarado.
• Además, especifique una imagen que se mostrará en el modelo de objeto de documento (DOM).

Continuemos a la parte de JavaScript del código:

En las líneas de código anteriores, realice los siguientes pasos:

• Acceder al "cuerpo"Elemento en el que se contienen el encabezado y la imagen establecidos utilizando el"documento.QuerySelector ()" método.
• Después de eso, adjunte un "inscroll"Evento para ello. Tras el evento activado, se invocará la función establecida.
• En la definición de función, cada vez que el usuario se desplaza hacia abajo, se verificará el número de píxeles.
• Si los píxeles se vuelven más grandes que la altura del cuerpo y la ventana, agregue "200px"A la altura actual del cuerpo para desplazarse infinitamente.

Producción

En la salida anterior, es evidente que el pergamino se implementa infinitamente en el DOM.

Conclusión

La combinación del "addEventListener ()" y "añadir Niño()"Métodos o los combinados"inscroll"Evento y"ramilleteLa propiedad se puede utilizar para implementar el desplazamiento infinito en JavaScript. El enfoque anterior se puede utilizar para asociar un evento y agregar la lista de elementos como un niño Tan pronto como la lista se desplaza hasta el fondo. El último enfoque se puede aplicar para adjuntar un evento al "cuerpo"Elemento y desplácese revisando los píxeles verticales y agregando algunos píxeles para desplazarse infinitamente. Este tutorial explica cómo desplazarse infinitamente en JavaScript.