Genom att rulla kan användare se webbsidorna/långa dokumenten åt vänster och höger eller upp och ner. Det kan utföras genom att lägga till horisontella och vertikala rullningslister beroende på innehållet. Måtten på rullningslisten som höjd och bredd är inställda som standard. Dessa kan dock anpassas med hjälp av deras tillhörande JavaScript-metoder. När de väl kan läggas till eller ställas in i dokumentet kan användaren enkelt identifiera dem med den inbyggda ' scrollTop() ', och den ' scrollLeft() ' metoder.
Det här inlägget förklarar syftet och funktionaliteten för metoden 'scrollLeft()' i jQuery.
Vad är metoden 'scrollLeft()' i jQuery?
den ' scrollLeft() ”-metoden är speciellt utformad för den horisontella rullningslisten för att ställa in och hämta sin position i pixlar. Den beräknar den valda HTML-elementets rullningslistposition. Det tillämpas mestadels på div-, container- och sektionselementen.
Syntax (Ange horisontell rullningslistposition)
$ ( väljare ) .scrollLeft ( placera )
Ovanstående syntax tar heltalsvärdet som dess ' placera ”-argument för att ställa in målväljarens horisontella rullningslistposition.
Syntax (Hämta horisontell rullningslistposition)
$ ( väljare ) .scrollLeft ( )
Denna syntax returnerar 'position'-argumentvärdet för väljaren i pixlar.
Låt oss använda den definierade metoden praktiskt.
HTML-kod
Ta först en titt på den angivna HTML-koden:
< sektion stil = 'höjd:150px; bredd: 200px ;marginal:auto;kant:2px fast svart; spill: auto;white-space: nowrap;' >
< h2 > Välkommen till Linuxhint ! h2 >
sektion >
< knapp > Ställ in position knapp >
I kodraderna ovan:
- den '
”-taggen innehåller en sektion i HTML-dokumentet anpassad med hjälp av attributet “style”. - Inuti den skapade sektionen visas ' ”-taggen definierar underrubriken.
- Slutligen, '
”-taggen lägger till en knapp.
Notera: Följ den givna HTML-koden i alla exempel i detta inlägg.
Exempel 1: Använd metoden 'scrollLeft()' för att ställa in rullningslistens (horisontella) position
Det här exemplet använder metoden 'scrollLeft()' för att ställa in rullningslisten (horisontell) på den angivna positionen.
jQuery-kod
Följ den givna jQuery-koden:
< manus src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > manus >< manus >
$ ( dokumentera ) .redo ( fungera ( ) {
$ ( 'knapp' ) .klick ( fungera ( ) {
$ ( 'sektion' ) .scrollLeft ( femtio ) ;
} ) ;
} ) ;
manus >
I detta kodavsnitt:
- Ange först CDN-sökvägen för jQuery-biblioteket i '