Cauta rapid aici ↑

Infinite scroll sau cum sa incarci elemente in pagina

Exista foarte multe site-uri web care au incorporat o functie prin care iti pot arata continut nou in momentul cand bara de scroll a ajuns aproape de final. Modalitatea prin care acest lucru este efectuat este destul de simpla si nu este singura iar in exemplul urmator va voi arata una dintre ele.

Mai intai de toate trebuie sa ne asiguram ca nu vom avea probleme din cauza limbajului CSS iar aici ma refer la situatia in care elementul parinte nu are bara de scroll. Asadar continutul elementului parinte trebuie sa fie mai mare decat inaltimea ferestrei browserului sau a elementului din care face parte iar in acest ultim caz va trebui sa avem grija ca bara de scroll sa fie existenta.

Urmatorul pas este sa declaram functia care va fi executata ori de cate ori este declansat evenimentul scroll. In interiorul acestei functii va trebui sa declaram in cateva variabile elementul parinte, un element div pe care il cream, inaltimea elementului parinte, un numarul ce reprezinta cat anume s-a efectuat scroll si aici vom aduna inaltimea elementului parinte cu inaltimea intregi pagini, un array cu string-uri pe care le vom adauga in elementul div creat si in cele din urma va trebui sa retinem tot intr-o variabila o valoare numerica ce va fi stocata de elementul parinte cu ajutorul atributului data-element.

Modalitatea prin care vom retine intr-o variabila (valoarea string convertita in numerica) ceea ce are ca valoare atributul data-element este prin folosirea proprietatii dataset iar aceasta este o modalitate mai buna decat prin folosirea metodei getAttribute().

Urmatorul pas si cel mai important din intreaga functie este sa comparam valorile declarate in variabile si vom face asta cu ajutorul conditiei if. Intr-o prima faza ne vom asigura ca s-a efectuat scroll pana aproape de final si cand acest lucru s-a indeplinit vom executa urmatorul cod tot cu ajutorul unei conditii if else, conditie ce se va afla in interiorul primei conditii if.

In interiorul acestei conditii if else vom incrementa si testa variabila ce contine valoarea numerica provenita de la elementul parinte cu ajutorul proprietatii dataset pe care o vom si modifica in elementul parinte. Cu aceasta ocazie vom adauga si continutul string in elementul div si apoi in elementul parinte exact cum se poate vedea in codul de mai jos.

Daca veti folosi acest exemplu singurul lucru pe care trebuie sa il faceti este sa adaugati alte string-uri cu cod HTML in array.

Dupa cum spuneam mai sus acesta este un exemplu, voi puteti sa ajustati liniile voastre de cod dupa preferinte sau situatia pe care o aveti insa cel mai important este sa retineti pricipiul care sta la baza unui scroll infinit sau adaugarea de elemente noi in pagina.