Rolovanie umožňuje používateľom prezerať si webové stránky/dlhé dokumenty doľava a doprava alebo nahor a nadol. Dá sa to vykonať pridaním vodorovných a zvislých posúvačov v závislosti od obsahu. Rozmery posúvača, ako je výška a šírka, sú predvolene nastavené. Tie však možno prispôsobiť pomocou pridružených metód JavaScriptu. Keď ich možno pridať alebo nastaviť do dokumentu, používateľ ich môže ľahko identifikovať pomocou vstavaného „ scrollTop() “ a „ scrollLeft() “ metódy.
Tento príspevok vysvetľuje účel a funkčnosť metódy „scrollLeft()“ v jQuery.
Čo je metóda „scrollLeft()“ v jQuery?
' scrollLeft() ” metóda je špeciálne navrhnutá pre horizontálny posuvník na nastavenie a získanie jeho polohy v pixeloch. Vypočíta polohu posúvača vybratého prvku HTML. Väčšinou sa používa na prvky div, kontajner a sekcie.
Syntax (Nastaviť horizontálnu polohu posúvača)
$ ( selektor ) .scrollLeft ( pozíciu )
Vyššie uvedená syntax berie celočíselnú hodnotu ako „ pozíciu Argument ” na nastavenie vodorovného posúvača cieľového selektora.
Syntax (získať polohu horizontálneho posúvača)
$ ( selektor ) .scrollLeft ( )
Táto syntax vracia hodnotu argumentu „position“ selektora v pixeloch.
Využime definovanú metódu prakticky.
HTML kód
Najprv si pozrite uvedený HTML kód:
< oddiele štýl = 'výška:150px; šírka: 200px;okraj:auto;okraj:2px plná čierna; pretečenie: auto;biele miesto: nowrap;' >
< h2 > Vitajte v Linuxhint ! h2 >
oddiele >
< tlačidlo > Nastaviť pozíciu tlačidlo >
Vo vyššie uvedených riadkoch kódu:
- '
” tag obsahuje sekciu vo vnútri HTML dokumentu prispôsobenú pomocou atribútu “style”. - Vo vytvorenej sekcii sa „ ” tag definuje podnadpis.
- Nakoniec, „
” tag pridáva tlačidlo.
Poznámka: Postupujte podľa daného HTML kódu vo všetkých príkladoch tohto príspevku.
Príklad 1: Použitie metódy „scrollLeft()“ na nastavenie polohy posúvača (horizontálna)
Tento príklad používa metódu „scrollLeft()“ na nastavenie posúvača (horizontálne) na zadanú pozíciu.
kód jQuery
Postupujte podľa zadaného kódu jQuery:
< skript src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > skript >< skript >
$ ( dokument ) .pripravený ( funkciu ( ) {
$ ( 'tlačidlo' ) .kliknite ( funkciu ( ) {
$ ( 'sekcia' ) .scrollLeft ( päťdesiat ) ;
} ) ;
} ) ;
skript >
V tomto útržku kódu:
- Najprv zadajte cestu CDN knižnice jQuery v súbore „