Menetelmä ikkunan vieritykselle elementtiin JavaScriptissä

Menetelmä scrollIntoView vierittää ikkunan annettuun elementtiin. Menetelmää sovelletaan elementtiin, johon ikkuna tulisi vierittää. Menetelmän parametrillä säädetään, mihin elementin tulisi päätyä: ikkunan ylä- tai alaosaan.

Katsotaanpa esimerkkien avulla. Vieritetään ikkuna niin, että elementti on ikkunan yläreunassa:

elem.scrollIntoView(true);

Ja nyt vieritetään ikkuna niin, että elementti on ikkunan alareunassa:

elem.scrollIntoView(false);

Parametrina voidaan myös välittää objekti asetusten kanssa. Vieritetään ikkuna sulavasti elementtiin:

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

Asetusobjektilla on myös asetuksia sivun kohdistamiseksi elementtiin nähden. Asetus block määrittää pystysuuntaisen kohdistuksen, ja asetus inline - vaakatasoisen. Ne voivat saada seuraavat arvot: 'start', 'center', 'end', 'nearest'.

Kokeillaan:

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

Annettu elementti ja painike. Painiketta painettaessa vieritä sivu kyseiseen elementtiin. Kokeile kaikkia kuvattuja ominaisuuksia.