Textarea functions don't work with contenteditable elements that are not textareas - textarea

Question

I'm trying to make a scrollbar stay down with this function (Tampermonkey, on the website: 'https://dictation.io/speech'):
setInterval(function() {
document.getElementsByClassName('ql-editor').scrollTop = document.getElementsByClassName('ql-editor').scrollHeight;
}, 500);
It worked before on another website.
I've fixed the height of the text box, so this scrollbar appears when there is enough of text:
div.notepad {
height : 771px;
}
I've tried doing this:
setInterval(function() {
document.getElementById("speech").scrollTop = document.getElementById("speech").scrollHeight;
}, 500);
and this (to make it read only, but it also doesn't work):
document.getElementById("speech").readOnly = true;
document.getElementsByClassName("ql-editor").readOnly = true;
I'm simply trying to keep the scrollbar always down. And I tried all possible ids and classnames. It worked very well on another website (the textbox was such: <textarea class="-metrika-nokeys" name="docel" id="docel" style="width: 100%;" cols="80" rows="20" spellcheck="true"></textarea>). But nothing has any effect on the text box on this website.
Thank you for any help in advance!
P.S. The problem is universal. This code (and when it's ".ql-editor" instead of '#speech') also doesn't work:
var input = document.querySelector('#speech');
var textarea = document.querySelector('#speech');
var reset = function(e) {
var context = this;
setTimeout(function() {
var len = context.value.length;
context.setSelectionRange(len, len);
}, 100);
};
input.addEventListener('copy', reset, false);
textarea.addEventListener('copy', reset, false);

Answer 1

I was able to solve it (probably not the best solution) by creating a textarea, copying text there from the div, and applying all those functions to that textarea.
Here is the code:
Creating a textarea:
var div = document.getElementById("speech");
var input = document.createElement("textarea");
input.setAttribute("id", "normaltext");
input.name = "post";
input.cols = "80";
input.rows = "2";
div.appendChild(input); //appendChild
Copying everything from the div to the textarea:
setInterval(function copyText() {
$("#normaltext").val($(".ql-editor").text());
}, 100);
Applying functions:
var input1 = document.querySelector('#normaltext');
var textarea1 = document.querySelector('#normaltext');
var reset = function(e) {
var context = this;
setTimeout(function() {
var len = context.value.length;
context.setSelectionRange(len, len);
}, 100);
};
input1.addEventListener('copy', reset, false);
textarea1.addEventListener('copy', reset, false);
setInterval(function() {
document.getElementById("normaltext").scrollTop = document.getElementById("normaltext").scrollHeight;
}, 500);
That works for me, but maybe someone will come up with a better solution.