Tekst area automatisch naar beneden laten scrollen
Als aan een <textarea> automatisch inhoud wordt toegevoegd, is dat niet zichtbaar als de toevoeging buiten de
viewport van die <textarea>valt. Er zijn echter toepassingen waarbij je de toevoegingen meteen wilt zien. Om dat
te bereiken moet de <textarea> na elke toevoeging naar het einde worden gescrolled.
Op deze pagina wordt uitgelegd hoe je dat kunt aanpakken.
Hiernaast zie je een
<textarea>. Die is readonly, de inhoud kun je zelf niet veranderen, dat wordt gedaan door een script op deze
pagina. Zoals je ziet wordt er onderaan steeds iets toegevoegd en schuift de inhoud naar boven. Als de <textarea>
vol is, verschijnt er een schuifbalk waarvan het schuifelement steeds korter wordt. Dat geeft aan dat de inhoud van de
<textarea> steeds groter wordt.
De <textarea> kan worden vergroot en verkleind met de grip in de rechter onderhoek.
Op het moment dat dit wordt geschreven werkt dit laatste niet met Chrome op mobiele apparaten. FireFox
en Edge doen het wel goed.
De code voor de <textarea> in het voorbeeld ziet er als volgt uit:
<textarea id="bericht" rows="10" cols="20" readonly></textarea>
Voor de opmaak kan hier nog een style-attribuut aan worden toegevoegd. Opmaak met CSS via het id kan natuurlijk
ook.
Het attribuut maxlength moet je weglaten, omdat die de hoeveelheid (lengte) van de de inhoud van de <textarea>
beperkt.
Het toevoegen van de berichten aan de <textarea> gebeurt door de function nieuwBericht(str). De code
van deze function luidt:
function nieuwBericht(str) { // Voeg een nieuwe melding toe
let xx = document.getElementById('bericht');
xx.innerHTML += str + "\n";
xx.scrollTop = xx.scrollHeight;
} // nieuwBericht
De parameter str bevat het bericht dat in de <textarea> wordt geplaatst. De function zet er zelf een
'Carriage return / Line feed' (CrLf) achter met het escape-karakter
"\n", zodat elke bericht op een nieuwe regel begint.
Het werkelijke scrollen wordt geregeld door de regel code:
xx.scrollTop = xx.scrollHeight;
De 'scroll-pointer' (eigenschap scrollTop) wordt gelijk gemaakt aan de hoogte van de inhoud van de <textarea>
(eignschap scrollHeight).
In het voorbeeld wordt nieuwBericht() aangeroepen door de function volgende(). Deze function maakt de string
str klaar: De string 'Bericht ' wordt gekoppeld met een volgnummer.
volgende() wordt elke seconde aangeroepen met behulp van setInterval().
