Kerimine võimaldab kasutajatel vaadata veebilehti/pikki dokumente vasakule ja paremale või üles ja alla. Seda saab teha horisontaalsete ja vertikaalsete kerimisribade lisamisega, olenevalt sisust. Kerimisriba mõõtmed, nagu kõrgus ja laius, on vaikimisi määratud. Neid saab aga kohandada nendega seotud JavaScripti meetodite abil. Kui neid saab dokumenti lisada või määrata, saab kasutaja need hõlpsasti tuvastada, kasutades sisseehitatud ' scrollTop() ', ja ' kerige vasakule () ” meetodid.
See postitus selgitab jQuery meetodi 'scrollLeft()' eesmärki ja funktsioone.
Mis on jQuery meetod 'scrollLeft()'?
' kerige vasakule () ” meetod on spetsiaalselt loodud horisontaalse kerimisriba jaoks selle asukoha määramiseks ja leidmiseks pikslites. See arvutab valitud HTML-i elemendi kerimisriba asukoha. Seda rakendatakse enamasti div-, konteiner- ja jaotiselementidele.
Süntaks (horisontaalse kerimisriba asukoha määramine)
$ ( valija ) .scrollLeft ( positsiooni )
Ülaltoodud süntaks võtab täisarvu väärtuseks ' positsiooni ” argument sihitud valija horisontaalse kerimisriba asukoha määramiseks.
Süntaks (Hangi horisontaalne kerimisriba asukoht)
$ ( valija ) .scrollLeft ( )
See süntaks tagastab valija argumendi väärtuse „positsioon” pikslites.
Kasutame määratletud meetodit praktiliselt.
HTML-kood
Kõigepealt vaadake märgitud HTML-koodi:
< osa stiilis = 'kõrgus: 150 pikslit; laius: 200 pikslit ; veeris: automaatne; ääris: 2 pikslit täismust; ülevool: automaatne;tühik: nowrap;' >
< h2 > Tere tulemast Linuxhinti ! h2 >
osa >
< nuppu > Määra positsioon nuppu >
Ülaltoodud koodiridades:
- '
märgend sisaldab HTML-dokumendis jaotist, mis on kohandatud atribuudi 'style' abil. - Loodud jaotises on ' ” märgend määrab alampealkirja.
- Lõpuks, '
” silt lisab nupu.
Märge: Järgige antud HTML-koodi kõigis selle postituse näidetes.
Näide 1: meetodi 'scrollLeft()' rakendamine kerimisriba (horisontaalse) asukoha määramiseks
See näide kasutab meetodit 'scrollLeft()', et seada kerimisriba (horisontaalne) määratud asukohta.
jQuery kood
Järgige antud jQuery koodi:
< stsenaarium src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > stsenaarium >< stsenaarium >
$ ( dokument ) .valmis ( funktsiooni ( ) {
$ ( 'nupp' ) .klõpsake ( funktsiooni ( ) {
$ ( 'jaotis' ) .scrollLeft ( viiskümmend ) ;
} ) ;
} ) ;
stsenaarium >
Selles koodilõigus:
- Esmalt määrake jQuery teegi CDN-tee jaotises '