Hvordan uendelig bla i JavaScript?

Mens du designer en webside, betyr en brukers oppmerksomhet mye. I tillegg til det, skaper du en bedre visningsopplevelse av websiden sammenlignet med paginering. I det andre tilfellet, gjør siden som er kompatibel med mobile enheter også som er tilgjengelige for brukerne “24/7”. I slike tilfeller er scenarier, implementering av uendelig rulle i JavaScript en flott funksjonalitet som lar brukeren engasjere seg med "innhold”Beleilig.

Denne bloggen vil forklare tilnærmingen for å implementere uendelig rulle i JavaScript.

Hvordan implementere uendelig rulle i JavaScript?

Den uendelige rullen i JavaScript kan implementeres ved å bruke følgende tilnærminger:

• “AddEventListener ()”Og“vedlegg ()”Metoder.
• “Onscroll”Arrangement og“Scrolly”Eiendom.

Tilnærming 1: Uendelig bla i JavaScript ved hjelp av AddEventListener () og appendchild () -metoder

“AddEventListener ()”Metode brukes til å knytte en hendelse til det spesifiserte elementet. “vedlegg ()”Metode legger til en node til elementets siste barn. Disse metodene kan brukes for å knytte en hendelse til listen og legge til listeelementene som det siste barnet i den.

Syntaks

element.AddEventListener (arrangement, lytter, bruk);

I den gitte syntaks:

• “begivenhet”Henviser til den spesifiserte hendelsen.
• “lytter”Peker på funksjonen som vil bli påkalt.
• “bruk”Er den valgfrie verdien.

element.AppendChild (node)

I syntaks ovenfor:

• “Node”Henviser til at noden skal legges ved.

Eksempel
La oss følge det under-uttalte eksemplet:

Rulleliste uendelig

I koden ovenfor, utfør følgende trinn:

• Inkluder den angitte overskriften.
• Også tildele "id”Kalt”bla”Til den uordnede listen.

La oss gå videre til JavaScript -delen av koden:

I ovennevnte JS -kodebit:

• Få tilgang til “liste”Spesifisert før av sin“id" bruker "dokument.QuerySelector ()”Metode.
• I neste trinn, initialiser variabelen “Legg til”Med“1”.
• Erklærer også en inline -funksjon som heter “uendelig rulling()”. I sin definisjon, iterere en “til”Loop slik at“20”Elementer er inneholdt i en liste.
• Etter det, lag en elementnode som heter “li”Og øk det med“1”Med henvisning til den initialiserte variabelen”Legg til”Slik at det er vedlagt det opprettet”liste”Som barn som bruker“vedlegg ()”Metode.
• I den videre koden, legg ved en hendelse som heter “bla”. Etter den utløste hendelsen vil den uttalte funksjonen bli påberopt.
• Til slutt, i funksjonsdefinisjonen, bruk funksjonalitetene for å oppdage listen når den rulles til bunnen.

For styling av listen, utfør følgende trinn:

Styler listen ovenfor i listen og justerer dimensjonene.

Produksjon

Fra output ovenfor kan det observeres at elementene øker på en uendelig måte, og det samme er rullingen.

Tilnærming 2: Uendelig rulle i JavaScript ved hjelp av Onscroll -arrangementet med Scrolly Property

“Onscroll”Arrangement utløser når rullefeltet til et element blir rullet. “Scrolly”Eiendom beregner og returnerer pikslene som konsumeres i å bla et dokument fra vinduets øvre venstre hjørne. Disse tilnærmingene kan brukes til å knytte en hendelse til kroppselementet og bla ved å bruke en tilstand på de vertikale pikslene.

Syntaks

gjenstand.onScroll = funksjon () code;

I syntaks ovenfor:

• “gjenstand”Refererer til elementet som skal rulles.

Eksempel
La oss følge de nedenfor uttalte trinnene:

Dette er Linuxhint -nettstedet

I ovennevnte kodebit:

• Inkluder den angitte overskriften.
• Spesifiser også et bilde som skal vises på dokumentobjektmodellen (DOM).

La oss fortsette til JavaScript -delen av koden:

I kodelinjene ovenfor, utfør følgende trinn:

• Få tilgang til “kropp”Element der det angitte overskriften og bildet er inneholdt ved bruk av“dokument.QuerySelector ()”Metode.
• Etter det, legg ved en “Onscroll”Arrangement til det. Etter den utløste hendelsen vil den uttalte funksjonen bli påberopt.
• I funksjonsdefinisjonen, hver gang brukeren ruller ned, blir antall piksler sjekket.
• Hvis pikslene blir større enn kroppens og vinduets høyde, legg til “200px”Til kroppens nåværende høyde for å bla den uendelig.

Produksjon

I outputten er det tydelig at rullen implementeres uendelig på DOM.

Konklusjon

Kombinasjonen av “AddEventListener ()”Og“vedlegg ()”Metoder eller kombinert”Onscroll”Arrangement og“Scrolly”Eiendom kan brukes til å implementere uendelig rulle i JavaScript. Den tidligere tilnærmingen kan brukes til å knytte en hendelse og legge til listen over elementer som en barn Så snart listen er rullet til bunnen. Den sistnevnte tilnærmingen kan brukes for å knytte en hendelse til “kropp”Element og bla ved å sjekke de vertikale pikslene og legge til noen piksler i tillegg til å bla uendelig. Denne opplæringen forklarer hvordan du uendelig blar i JavaScript.