Comment faire défiler infini en javascript?

Lors de la conception d'une page Web, l'attention d'un utilisateur importe beaucoup. En plus de cela, la création d'une meilleure expérience de visualisation de la page Web par rapport à la pagination. Dans l'autre cas, rendre la page compatible avec les appareils mobiles qui sont à la disposition des utilisateurs "24/7". Dans de tels cas, la mise en œuvre du défilement infini en JavaScript est une excellente fonctionnalité permettant à l'utilisateur de s'engager avec «contenu«Pratiquement.

Ce blog expliquera l'approche pour implémenter un défilement infini en javascript.

Comment implémenter un défilement infini en JavaScript?

Le parchemin infini dans JavaScript peut être implémenté en utilisant les approches suivantes:

• "addEventListener ()" et "APPENDCHILD ()«Méthodes.
• "onscroll«Événement et«de façon dénuée" propriété.

Approche 1: Faites défiler infiniment en javascrip

Le "addEventListener ()»La méthode est utilisée pour attacher un événement à l'élément spécifié. Le "APPENDCHILD ()”La méthode ajoute un nœud au dernier enfant de l'élément. Ces méthodes peuvent être appliquées pour joindre un événement à la liste et ajouter les éléments de la liste comme le dernier enfant dedans.

Syntaxe

élément.AddeventListener (événement, écouteur, utilisation);

Dans la syntaxe donnée:

• "événement»Fait référence à l'événement spécifié.
• "auditeur»Porte la fonction qui sera invoquée.
• "utiliser"Est la valeur facultative.

élément.Annexe (nœud)

Dans la syntaxe ci-dessus:

• "nœud»Fait référence au nœud à ajouter.

Exemple
Suivons l'exemple indiqué ci-dessous:

Liste de défilement infiniment

Dans le code ci-dessus, effectuez les étapes suivantes:

• Inclure le cap indiqué.
• Allouez également le «identifiant" nommé "faire défiler”À la liste non ordonnée.

Passons à la partie javascript du code:

Dans l'extrait de code JS ci-dessus:

• Accéder au "liste»Spécifié avant par son«identifiant" en utilisant le "document.QuerySelector ()" méthode.
• Dans l'étape suivante, initialisez la variable "ajouter" avec "1".
• De plus, déclarez une fonction en ligne nommée «DEFILEMENT infini()". Dans sa définition, itérer un «pour"Boucle telle que"20"Les éléments sont contenus dans une liste.
• Après cela, créez un nœud d'élément nommé "li"Et incrément de"1"Se référant à la variable initialisée"ajouter"Tel qu'il est annexé au créé"liste"En tant qu'enfant utilisant le"APPENDCHILD ()" méthode.
• Dans le code supplémentaire, joignez un événement nommé «faire défiler". Lors de l'événement déclenché, la fonction indiquée sera invoquée.
• Enfin, dans la définition de la fonction, appliquez les fonctionnalités pour détecter la liste lorsqu'elle est défilée en bas.

Pour styliser la liste, effectuez les étapes suivantes:

Dans les lignes ci-dessus, stylisez la liste et ajustez ses dimensions.

Sortir

À partir de la sortie ci-dessus, on peut observer que les éléments incrément de manière infinie, tout comme le défilement.

Approche 2: Faites défiler infiniment en javascrip

Le "onscroll»L'événement déclenche lorsque la barre de défilement d'un élément est en cours de défilement. Le "de façon dénuée”La propriété calcule et renvoie les pixels qui sont consommés pour faire défiler un document dans le coin supérieur gauche de la fenêtre. Ces approches peuvent être utilisées pour attacher un événement à l'élément corporel et faire défiler en appliquant une condition aux pixels verticaux.

Syntaxe

objet.onScroll = function () code;

Dans la syntaxe ci-dessus:

• "objet»Fait référence à l'élément à faire défiler.

Exemple
Suivons les étapes indiquées ci-dessous:

Ceci est le site Web de Linuxhint

Dans l'extrait de code ci-dessus:

• Inclure le cap indiqué.
• Spécifiez également une image à afficher sur le modèle d'objet de document (DOM).

Continuons à la partie javascript du code:

Dans les lignes de code ci-dessus, effectuez les étapes suivantes:

• Accéder au "corps»Élément dans lequel le titre et l'image indiqués sont contenus en utilisant le«document.QuerySelector ()" méthode.
• Après cela, attachez un «onscroll»Événement. Lors de l'événement déclenché, la fonction indiquée sera invoquée.
• Dans la définition de la fonction, chaque fois que l'utilisateur défile vers le bas, le nombre de pixels sera vérifié.
• Si les pixels deviennent plus grands que la hauteur du corps et de la fenêtre, ajoutez "200px«À la hauteur actuelle du corps pour le faire défiler infiniment.

Sortir

Dans la sortie ci-dessus, il est évident que le parchemin est implémenté à l'infini sur le DOM.

Conclusion

La combinaison du «addEventListener ()" et "APPENDCHILD ()"Méthodes ou le combiné"onscroll«Événement et«de façon dénuée»La propriété peut être utilisée pour implémenter un défilement infini en JavaScript. La première approche peut être utilisée pour associer un événement et ajouter la liste des éléments en tant que enfant Dès que la liste est défilée en bas. Cette dernière approche peut être appliquée pour attacher un événement au «corps”Élément et faites défiler en vérifiant les pixels verticaux et en ajoutant également certains pixels pour faire défiler l'infini. Ce tutoriel explique comment faire défiler infiniment en javascript.