Durch Scrollen können Benutzer die Webseiten/langen Dokumente links und rechts oder oben und unten anzeigen. Dies kann je nach Inhalt durch das Hinzufügen horizontaler und vertikaler Bildlaufleisten erfolgen. Die Abmessungen der Bildlaufleiste wie Höhe und Breite sind standardmäßig festgelegt. Diese können jedoch mit Hilfe der zugehörigen JavaScript-Methoden angepasst werden. Sobald sie dem Dokument hinzugefügt oder eingefügt werden können, kann der Benutzer sie mithilfe der integrierten „ scrollTop() ', und das ' scrollLeft() ” Methoden.
In diesem Beitrag werden der Zweck und die Funktionalität der Methode „scrollLeft()“ in jQuery erläutert.
Was ist die Methode „scrollLeft()“ in jQuery?
Der ' scrollLeft() Die Methode wurde speziell für die horizontale Bildlaufleiste entwickelt, um deren Position in Pixel festzulegen und abzurufen. Es berechnet die Position der Bildlaufleiste des ausgewählten HTML-Elements. Es wird hauptsächlich auf die Elemente div, container und section angewendet.
Syntax (Position der horizontalen Bildlaufleiste festlegen)
$ ( Wähler ) .scrollLeft ( Position )
Die obige Syntax verwendet den ganzzahligen Wert als „ Position ”-Argument, um die horizontale Bildlaufleistenposition des Zielselektors festzulegen.
Syntax (Horizontale Bildlaufleistenposition abrufen)
$ ( Wähler ) .scrollLeft ( )
Diese Syntax gibt den „Position“-Argumentwert des Selektors in Pixeln zurück.
Lassen Sie uns die definierte Methode praktisch anwenden.
HTML Quelltext
Schauen Sie sich zunächst den angegebenen HTML-Code an:
< Abschnitt Stil = 'height:150px; width: 200px ;margin:auto;border:2px solid black; overflow: auto;Leerraum: nowrap;' >
< h2 > Willkommen bei Linuxhint ! h2 >
Abschnitt >
< Taste > Position setzen Taste >
In den obigen Codezeilen:
- Der '
Das Tag „“ enthält einen Abschnitt innerhalb des HTML-Dokuments, der mithilfe des Attributs „style“ angepasst wird. - Im erstellten Abschnitt befindet sich das „ „Tag definiert die Unterüberschrift.
- Schließlich ist das „
”-Tag fügt eine Schaltfläche hinzu.
Notiz: Befolgen Sie in allen Beispielen dieses Beitrags den angegebenen HTML-Code.
Beispiel 1: Anwenden der Methode „scrollLeft()“, um die Position der Bildlaufleiste (horizontal) festzulegen
In diesem Beispiel wird die Methode „scrollLeft()“ verwendet, um die Bildlaufleiste (horizontal) an der angegebenen Position zu setzen.
jQuery-Code
Folgen Sie dem angegebenen jQuery-Code:
< Skript src = „https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js“ > Skript >< Skript >
$ ( dokumentieren ) .bereit ( Funktion ( ) {
$ ( 'Taste' ) .klicken ( Funktion ( ) {
$ ( 'Abschnitt' ) .scrollLeft ( fünfzig ) ;
} ) ;
} ) ;
Skript >
In diesem Codeausschnitt:
- Geben Sie zunächst den CDN-Pfad der jQuery-Bibliothek im Feld „
„Tag von seiner offiziellen Website“ https://jquery.com/ ” mit Hilfe der „ src ” Attribut. - Als nächstes definiert das zweite „