Comment implémenter un défilement automatique dans JavaScript
Ce blog expliquera les méthodes pour implémenter Auto Scroll dans JavaScript.
Comment implémenter un défilement automatique dans JavaScript?
Pour implémenter un défilement automatique dans JavaScript, les méthodes suivantes peuvent être appliquées:
- "fenêtre.ScrolltO ()" Méthode
- "fenêtre.Scrollby ()" Méthode
- En utilisant "jquery"
Les approches suivantes démontreront le concept indiqué un par un!
Méthode 1: Implémentez le défilement automatique dans JavaScript à l'aide de la fenêtre.ScrolltO () Méthode
Le "ScrolltO ()”Méthode défile le modèle d'objet de document (DOM) en fonction des valeurs de coordonnées spécifiées. Cette méthode peut être implémentée pour faire défiler automatiquement tout élément HTML en fonction des valeurs de coordonnées données.
Syntaxe
fenêtre.Scrollto (x, y)Dans la syntaxe donnée, X et Y se réfèrent au «X" et "Y»Coordonne, respectivement.
Voyons l'exemple ci-dessous pour comprendre le concept déclaré.
Exemple
Dans cet exemple, nous créerons un bouton avec un "sur clic»Événement invoquant la fonction autoScroll ():
Maintenant, incluez une rubrique dans le « Les images suivantes seront automatiquement défilées Après cela, nous ajouterons deux images avec leurs chemins et définirons leurs dimensions en utilisant les propriétés de hauteur et de largeur: Enfin, définissez une fonction nommée «défilement automatique()". Dans sa définition de fonction, appliquez le «fenêtre.ScrolltO ()«Méthode et définissez les coordonnées en fonction de vos exigences. Dans notre cas, nous avons réglé «0«Comme les coordonnées X et«200«Comme les coordonnées Y: La sortie correspondante sera: Dans la sortie ci-dessus, on peut observer que la barre de défilement est défilée vers un certain emplacement en fonction des valeurs définies dans la méthode ScrollTO (). Méthode 2: Implémentez le défilement automatique dans JavaScript à l'aide de la fenêtre.Méthode Scrollby () Le "Scrollby ()"Méthode défile le document en fonction du nombre donné de pixels dans l'argument. Plus précisément, nous utiliserons cette méthode pour faire défiler automatiquement le Dom en bas sur le bouton cliquer. Syntaxe Dans la syntaxe ci-dessus, "X" et "y»Fait référence aux valeurs de pixels horizontales et verticales utilisés pour le défilement. Exemple Tout d'abord, créez un bouton avec un "sur clic«Redirection des événements vers la fonction«défilement automatique()»: Ensuite, incluez le titre suivant comme indiqué dans la méthode précédente: Les images suivantes seront automatiquement défilées De même, utilisez le «SRC”Attribut pour ajouter le chemin d'images et définir leurs dimensions: Maintenant, nous inclurons deux paragraphes dans le « Les images spécifiées représentent les différents scènes de cas Modèle que les littéraux utilisent les caractères de backtick (') et sont principalement utilisés pour l'interpolation des chaînes. Cette technique peut être utilisée pour afficher la valeur de chaîne spécifiée par rapport au modèle de littéral correspondant utilisé pour lui. Il sera placé dans la définition de la fonction d'origine ainsi que la valeur de la fonction de rappel. Enfin, définissez la fonction nommée «défilement automatique()". Ici, appliquez le «fenêtre.Scrollby ()”Méthode et définissez le nombre de pixels de telle sorte qu'il défile automatiquement sur l'emplacement requis du DOM: Dans notre cas, le défilement automatique fait défiler vers le bas vers le bas de la page: Dans la sortie ci-dessus, on peut voir que le DOM est automatiquement défilé jusqu'au bas sur le bouton cliquer. Méthode 3: Implémentez le défilement automatique en javascript à l'aide de jQuery Cette technique peut être implémentée pour faire défiler automatiquement l'image spécifiée en incluant le «jquery»La bibliothèque et ses méthodes, telles que ScrollTop () et Height (). Plus précisément, nous utiliserons la méthode ScrollTop () pour définir la position de la barre de défilement verticale pour les éléments sélectionnés. Syntaxe Ici le "sélecteur"Indique le"document"Dans l'exemple discuté ci-dessous. L'exemple suivant illustre le concept déclaré. Exemple Tout d'abord, spécifiez la source du «jquery»Bibliothèque dans la balise de script:
fenêtre.Scrollto (0, 200);
fenêtre.Scrollby (0, 500);