Metode lapas ritināšanai līdz elementam JavaScript

Metode scrollIntoView ritina logu līdz norādītajam elementam. Metode tiek piemērota elementam, līdz kuram vajadzētu ritināt logu. Ar metodes parametru regulē, kur elementam jāatrodas: loga augšdaļā vai apakšā.

Apskatīsim ar piemēriem. Ritināsim logu tā, lai elements būtu loga augšdaļā:

elem.scrollIntoView(true);

Un tagad ritināsim logu tā, lai elements būtu loga apakšā:

elem.scrollIntoView(false);

Var arī parametram padot objektu ar iestatījumiem. Veiksim vienmērīgu ritināšanu līdz elementam:

elem.scrollIntoView({
	behavior: 'smooth',
});

Objektam ar iestatījumiem ir arī iestatījumi lapas izlīdzināšanai attiecībā pret elementu. Iestatījums block nosaka vertikālo izlīdzināšanu, bet iestatījums inline - horizontālo. Tie var iegūt šādas vērtības: 'start', 'center', 'end', 'nearest'.

Izmēģināsim:

elem.scrollIntoView({
	behavior: 'smooth',
	block: 'start',
	inline: 'end',
});

Dots elements un poga. Nospiežot pogu, ritiniet lapu līdz šim elementam. Izmēģiniet visas aprakstītās iespējas.