Door te scrollen kunnen gebruikers de webpagina's/lange documenten links en rechts of omhoog en omlaag bekijken. Dit kan worden uitgevoerd door de toevoeging van horizontale en verticale schuifbalken, afhankelijk van de inhoud. De afmetingen van de schuifbalk zoals de hoogte en breedte zijn standaard ingesteld. Deze kunnen echter worden aangepast met behulp van de bijbehorende JavaScript-methoden. Zodra ze kunnen worden toegevoegd of ingesteld in het document, kan de gebruiker ze eenvoudig identificeren met behulp van de ingebouwde ' scrollTop() ', en de ' scrollLinks() ” methoden.
In dit bericht wordt het doel en de functionaliteit van de methode 'scrollLeft()' in jQuery uitgelegd.
Wat is de 'scrollLeft()'-methode in jQuery?
De ' scrollLinks() ” methode is speciaal ontworpen voor het instellen en ophalen van de positie van de horizontale schuifbalk in pixels. Het berekent de positie van de schuifbalk van het geselecteerde HTML-element. Het wordt meestal toegepast op de div-, container- en sectie-elementen.
Syntaxis (Horizontale schuifbalkpositie instellen)
$ ( kiezer ) .scrollLinks ( positie )
De bovenstaande syntaxis neemt de gehele waarde als zijn ' positie ”-argument om de positie van de horizontale schuifbalk van de beoogde selector in te stellen.
Syntaxis (Haal de positie van de horizontale schuifbalk op)
$ ( kiezer ) .scrollLinks ( )
Deze syntaxis retourneert de argumentwaarde 'positie' van de selector in pixels.
Laten we de gedefinieerde methode praktisch gebruiken.
HTML code
Bekijk eerst de vermelde HTML-code:
< sectie stijl = 'hoogte: 150 px; breedte: 200 px; marge: auto; rand: 2 px effen zwart; overloop: auto;witruimte: nowrap;' >
< h2 > Welkom bij Linuxhint ! h2 >
sectie >
< knop > Positie instellen knop >
In de bovenstaande regels code:
- De '
” tag bevat een sectie binnen het HTML-document aangepast met behulp van het “style” attribuut. - In de gemaakte sectie, de ' ” tag definieert de subkop.
- Als laatste de “
” tag voegt een knop toe.
Opmerking: Volg de gegeven HTML-code in alle voorbeelden van dit bericht.
Voorbeeld 1: de methode 'scrollLeft()' toepassen om de positie van de schuifbalk (horizontaal) in te stellen
In dit voorbeeld wordt de methode 'scrollLeft()' gebruikt om de schuifbalk (horizontaal) op de opgegeven positie in te stellen.
jQuery-code
Volg de gegeven jQuery-code:
< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > script >< script >
$ ( document ) .klaar ( functie ( ) {
$ ( 'knop' ) .Klik ( functie ( ) {
$ ( 'sectie' ) .scrollLinks ( vijftig ) ;
} ) ;
} ) ;
script >
In dit codefragment:
- Specificeer eerst het CDN-pad van de jQuery-bibliotheek in de '