Rulning giver brugerne mulighed for at se websiderne/lange dokumenter til venstre og højre eller op og ned. Det kan udføres ved at tilføje vandrette og lodrette rullebjælker afhængigt af indholdet. Dimensionerne på rullepanelet, såsom højde og bredde, er indstillet som standard. Disse kan dog tilpasses ved hjælp af deres tilhørende JavaScript-metoder. Når de kan tilføjes eller indstilles i dokumentet, kan brugeren nemt identificere dem ved hjælp af den indbyggede ' scrollTop() ', og ' scrollLeft() ' metoder.
Dette indlæg forklarer formålet og funktionaliteten af 'scrollLeft()'-metoden i jQuery.
Hvad er 'scrollLeft()'-metoden i jQuery?
Det ' scrollLeft() ”-metoden er specielt designet til den vandrette rullepanel til at indstille og hente dens position i pixels. Den beregner den valgte HTML-elements rullebjælkeposition. Det anvendes for det meste på div-, container- og sektionselementerne.
Syntaks (Indstil vandret rullebjælkeposition)
$ ( vælger ) .scroll Venstre ( position )
Ovenstående syntaks tager heltalsværdien som sin ' position ” argument for at indstille den målrettede vælgers vandrette rullepanelposition.
Syntaks (Få vandret rullebjælkeposition)
$ ( vælger ) .scroll Venstre ( )
Denne syntaks returnerer 'position'-argumentværdien for vælgeren i pixels.
Lad os bruge den definerede metode praktisk.
HTML kode
Først skal du tage et kig på den angivne HTML-kode:
< afsnit stil = 'højde:150px; bredde: 200px;margin:auto;kant:2px ensfarvet sort; overløb: auto;white-space: nowrap;' >
< h2 > Velkommen til Linuxhint ! h2 >
afsnit >
< knap > Indstil position knap >
I ovenstående kodelinjer:
- Det '
” tag indeholder en sektion inde i HTML-dokumentet tilpasset ved hjælp af “style”-attributten. - Inde i den oprettede sektion er ' ” tag definerer underoverskriften.
- Til sidst, '
” tag tilføjer en knap.
Bemærk: Følg den givne HTML-kode i alle eksemplerne i dette indlæg.
Eksempel 1: Anvendelse af 'scrollLeft()'-metoden til at indstille rullebjælkens (vandrette) position
Dette eksempel bruger metoden 'scrollLeft()' til at indstille rullebjælken (vandret) til den angivne position.
jQuery kode
Følg den givne jQuery-kode:
< manuskript src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > manuskript >< manuskript >
$ ( dokument ) .parat ( fungere ( ) {
$ ( 'knap' ) .klik ( fungere ( ) {
$ ( 'afsnit' ) .scroll Venstre ( halvtreds ) ;
} ) ;
} ) ;
manuskript >
I dette kodestykke:
- Angiv først CDN-stien til jQuery-biblioteket i '