Derularea permite utilizatorilor să vizualizeze paginile web/documentele lungi la stânga și la dreapta sau în sus și în jos. Se poate realiza prin adăugarea de bare de defilare orizontale și verticale, în funcție de conținut. Dimensiunile barei de defilare, cum ar fi înălțimea și lățimea, sunt setate implicit. Cu toate acestea, acestea pot fi personalizate cu ajutorul metodelor JavaScript asociate. Odată ce pot fi adăugate sau setate în document, utilizatorul le poate identifica cu ușurință folosind funcția încorporată „ scrollTop() ', si ' scrollLeft() ” metode.
Această postare explică scopul și funcționalitatea metodei „scrollLeft()” în jQuery.
Ce este metoda „scrollLeft()” în jQuery?
„ scrollLeft() ”Metoda este concepută special pentru ca bara de defilare orizontală să seteze și să își recupereze poziția în pixeli. Acesta calculează poziția selectată a barei de defilare a elementului HTML. Se aplică mai ales elementelor div, container și secțiune.
Sintaxă (Set Horizontal Scrollbar Position)
$ ( selector ) .scrollLeft ( poziţie )
Sintaxa de mai sus ia valoarea întreagă drept „ poziţie ” argument pentru a seta poziția barei de defilare orizontală a selectorului vizat.
Sintaxă (Obțineți poziția barei de derulare orizontale)
$ ( selector ) .scrollLeft ( )
Această sintaxă returnează valoarea argumentului „poziție” a selectorului în pixeli.
Să folosim metoda definită practic.
Cod HTML
Mai întâi, aruncați o privire la codul HTML menționat:
< secțiune stil = „înălțime: 150 px; lățime: 200 px ; margine: automat; chenar: 2 px negru solid; depășire: automat;spatiu alb: nowrap;' >
< h2 > Bun venit la Linuxhint ! h2 >
secțiune >
< buton > Setați Poziția buton >
În rândurile de cod de mai sus:
- „
- În interiorul secțiunii create, „ ” eticheta definește subtitlul.
- În cele din urmă, „
” eticheta adaugă un buton.
Notă: Urmați codul HTML dat în toate exemplele acestei postări.
Exemplul 1: aplicarea metodei „scrollLeft()” pentru a seta poziția barei de derulare (orizontală)
Acest exemplu folosește metoda „scrollLeft()” pentru a seta bara de defilare (orizontală) la poziția specificată.
Cod jQuery
Urmați codul jQuery dat:
< scenariu src = „https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js” > scenariu >< scenariu >
$ ( document ) .gata ( funcţie ( ) {
$ ( 'buton' ) .clic ( funcţie ( ) {
$ ( 'secțiune' ) .scrollLeft ( cincizeci ) ;
} ) ;
} ) ;
scenariu >
În acest fragment de cod:
- Mai întâi, specificați calea CDN a bibliotecii jQuery în „