Solved

Question

Add scroll to this box :)

https://code.sololearn.com/WaRhRGrEjKx0/?ref=app

Answer 1

https://code.sololearn.com/WBhADoLor34u/?ref=app

Answer 2

You first need to deactivate the fake scroll done by your your 'typetext' function... comment and repace the line:
//row = Math.max(0, index - 20);
row = 0;

Then you need to handle real scroll of the textarea element by adding this loop after (and optionnally modifying) the line:
//document.forms[0].elements[0].value = contents + tl[index].substring(0, text_pos) + "|";
document.forms[0].elements[0].value = contents + tl[index].substring(0, text_pos) + "|\r\n";
var scroll = document.forms[0].elements[0].scrollTop;
while (document.forms[0].elements[0].scrollTop == scroll)
document.forms[0].elements[0].scrollTop = ++scroll;

Increment one by one should be enough in your context, but if more efficiency is needed, you could customize the scroll step by:
while (document.forms[0].elements[0].scrollTop == scroll) {
scroll += 1000;
document.forms[0].elements[0].scrollTop = scroll;
}