Hvordan implementere Auto Scroll i JavaScript
Denne bloggen vil forklare metodene for å implementere Auto Scroll i JavaScript.
Hvordan implementere Auto Scroll i JavaScript?
For å implementere Auto Scroll i JavaScript, kan følgende metoder brukes:
- “vindu.Scrollto ()”Metode
- “vindu.Scrollby ()”Metode
- Ved hjelp av "jQuery”
Følgende tilnærminger vil demonstrere det uttalte konseptet en etter en!
Metode 1: Implementere Auto Scroll i JavaScript ved hjelp av vindu.ScrollTo () -metode
“Scrollto ()”Metode ruller dokumentobjektmodellen (DOM) i henhold til de spesifiserte koordinatverdiene. Denne metoden kan implementeres for å automatisk rulle ethvert HTML -element i henhold til de gitte koordinatverdiene.
Syntaks
vindu.Scrollto (x, y)I den gitte syntaks refererer x og y til “X”Og“YHenholdsvis koordinater.
La oss sjekke ut det undergitte eksemplet for å forstå det uttalte konseptet.
Eksempel
I dette eksemplet vil vi opprette en knapp med en "ved trykk”Hendelse som påkaller funksjonen AutoScroll ():
Inkluderer nå en overskrift i " Følgende bilder blir automatisk rullet Etter det vil vi legge til to bilder med banene sine og sette dimensjonene deres ved å bruke høyden og breddeegenskapene: Til slutt, definer en funksjon som heter “AutoScroll ()”. I sin funksjonsdefinisjon, bruk "vindu.Scrollto ()”Metode og angi koordinatene i henhold til dine krav. I vårt tilfelle har vi satt "0”Som X koordinerer og“200”Som y koordinerer: Tilsvarende utgang vil være: I output ovenfor kan det observeres at rullefeltet rulles til et bestemt sted i henhold til de angitte verdiene i rulle- () -metoden. Metode 2: Implementere Auto Scroll i JavaScript ved hjelp av vindu.Scrollby () -metode “Scrollby ()”Metode ruller dokumentet i henhold til det gitte antall piksler i argumentet. Mer spesifikt bruker vi denne metoden for å automatisk rulle DOM til bunnen på knappeklikk. Syntaks I syntaks ovenfor, "x”Og“y”Refererer til de horisontale og vertikale pikselverdiene som brukes til rulling. Eksempel For det første, oppretter en knapp med en "ved trykk”Hendelse omdirigerer til funksjonen”AutoScroll ()”: Deretter inkluderer du følgende overskrift som diskutert i forrige metode: Følgende bilder blir automatisk rullet Tilsvarende, bruk "src”Attributt for å legge til bildestien og angi dimensjonene deres: Nå vil vi inkludere to avsnitt i " De spesifiserte bildene representerer de forskjellige case-scenarios Mal -bokstaver bruker backtick (') tegn og brukes hovedsakelig til streng interpolasjon. Denne teknikken kan brukes til å vise den spesifiserte strengverdien mot den tilsvarende malen bokstavelig brukt for den. Det vil bli plassert i den opprinnelige funksjonsdefinisjonen sammen med verdien av tilbakeringingsfunksjonen. Til slutt, definere funksjonen som heter “AutoScroll ()”. Her, bruk "vindu.Scrollby ()”Metode og angi antall piksler slik at det automatisk ruller til den nødvendige plasseringen av DOM: I vårt tilfelle vil automatisk rulle bla nedover mot bunnen av siden: I output ovenfor kan det sees at DOM er automatisk rullet til bunnen på knappeklikket. Metode 3: Implementere Auto Scroll i JavaScript ved hjelp av jQuery Denne teknikken kan implementeres for å automatisk rulle det spesifiserte bildet ved å inkludere "jQuery”Bibliotek og dets metoder, for eksempel ScrollTop () og høyde (). Mer spesifikt vil vi bruke rulleop () -metoden for å stille den vertikale rullefeltposisjonen for de valgte elementene. Syntaks Her, "velger”Indikerer“dokument”I det nedenfor diskuterte eksemplet. Følgende eksempel illustrerer det uttalte konseptet. Eksempel Først, spesifiser kilden til "jQuery”Bibliotek i skriptetoden:
vindu.Scrollto (0, 200);
vindu.Scrollby (0, 500);