Cauta rapid aici ↑

Cum sa fixezi bara de scroll in partea de jos a unui div

Fixarea barei de scroll in partea de jos a unui div este foarte utila in situatiile in care intr-un div apar date noi la un anumit interval de timp si vrem ca aceste date sa fie afisate fara a mai efectua scroll pana jos. Fie ca aceste date vin printr-un request AJAX sau este o functie JavaScript care adauga date noi in acest div ori un script de pe server, intotdeauna vrem ca aceste date sa fie afisate iar partea mobila de la bara de scroll sa fie intotdeauna in partea de jos.

Pentru a putea face acest lucru vom avea nevoie de doua proprietati pe care le vom atasa acestui div pe care il vom selecta si declara intr-o variabila. Proprietatile scrollTop si scrollHeight le vom folosi pe elementul selectat si in acest fel ii vom spune browser-ului sa efectueze scroll fata de marginea de sus exact cat este inaltimea div-ului si cum inaltimea div-ului este mereu in crestere, browser-ul va da scroll pana jos imediat ce noi date apar in acest div.

Este foarte important ce stiluri CSS va avea acest div declarate in fisierul extern sau unde le-ati declarat pentru acest div. Ideal este sa ii declarati o inaltime fixa in pixeli si daca utilizatorul doreste sa vada anumite date de mai sus, acesta sa poata efectua scroll. Puteti sa ascundeti bara de scroll folosind valoarea hidden pe proprietatea overflow. Nu trebuie sa va opriti aici si ii puteti lasa utilizatorului posibilitatea de a redimensiona pe verticala sau orizontala acest div folosind proprietatea resize cu valoarea vertical sau horizontal.

Codul pentru exemplul de mai sus.