Le défilement permet aux utilisateurs de visualiser les pages Web/documents longs à gauche et à droite ou de haut en bas. Elle peut être réalisée par l'ajout de barres de défilement horizontales et verticales en fonction du contenu. Les dimensions de la barre de défilement telles que la hauteur et la largeur sont définies par défaut. Cependant, ceux-ci peuvent être personnalisés à l'aide de leurs méthodes JavaScript associées. Une fois qu'ils peuvent être ajoutés ou définis dans le document, l'utilisateur peut facilement les identifier à l'aide de la fonction intégrée ' scrollTop() ', et le ' scrollGauche() ” méthodes.
Cet article explique le but et la fonctionnalité de la méthode 'scrollLeft()' dans jQuery.
Qu'est-ce que la méthode 'scrollLeft()' dans jQuery ?
Le ' scrollGauche() ” est spécifiquement conçue pour que la barre de défilement horizontale définisse et récupère sa position en pixels. Il calcule la position de la barre de défilement de l'élément HTML sélectionné. Il est principalement appliqué aux éléments div, conteneur et section.
Syntaxe (Définir la position de la barre de défilement horizontale)
$ ( sélecteur ) .scrollLeft ( position )
La syntaxe ci-dessus prend la valeur entière comme son ' position ” pour définir la position de la barre de défilement horizontale du sélecteur ciblé.
Syntaxe (Obtenir la position de la barre de défilement horizontale)
$ ( sélecteur ) .scrollLeft ( )
Cette syntaxe renvoie la valeur de l'argument 'position' du sélecteur en pixels.
Utilisons pratiquement la méthode définie.
Code HTML
Tout d'abord, jetez un œil au code HTML indiqué :
< section style = 'hauteur : 150 pixels ; largeur : 200 px ; marge : auto ; bordure : 2 px noir uni ; débordement : auto ;espace blanc : nowrap ; » >
< h2 > Bienvenue sur Linuxhint ! h2 >
section >
< bouton > Définir la position bouton >
Dans les lignes de code ci-dessus :
- Le '
” contient une section à l'intérieur du document HTML personnalisée à l'aide de l'attribut “style”. - Dans la section créée, le ' ” définit le sous-titre.
- Enfin, le «
” tag ajoute un bouton.
Note: Suivez le code HTML donné dans tous les exemples de cet article.
Exemple 1 : Application de la méthode 'scrollLeft()' pour définir la position de la barre de défilement (horizontale)
Cet exemple utilise la méthode 'scrollLeft()' pour définir la barre de défilement (horizontale) à la position spécifiée.
Code jQuery
Suivez le code jQuery donné :
< scénario src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > scénario >< scénario >
$ ( document ) .prêt ( fonction ( ) {
$ ( 'bouton' ) .Cliquez sur ( fonction ( ) {
$ ( 'section' ) .scrollLeft ( cinquante ) ;
} ) ;
} ) ;
scénario >
Dans cet extrait de code :
- Tout d'abord, spécifiez le chemin CDN de la bibliothèque jQuery dans le champ '