HTML span tag auto scroll

Question

In my HTMl file, I am trying to populate a span text zone with some voice-recognized text. I am struggling with one thing here:

Auto-scroll on the span zone:

<span id="final_span" class="final"></span>

Javascript code:

var final_span = document.getElementById("final_span");
finalDiv.innerHTML += '&nbsp' + data + '<p>';
finalDiv.scrollTop = finalDiv.scrollHeight;

The data inside the JavaScript keeps increasing, but when it exceeds the span limit, a scroll bar on the right appears because of the CSS code I wrote: overflow-y: scroll; I would like to build it as auto-scroll until the bottom when text exceeds.

Thanks for your time.

Answer 1

You can do it like below, as suggested in this question I have used interval to update element's scrollTop to its scrollHeight every couple of seconds. Below example I have used textarea to reproduce data.

document.getElementById("text").addEventListener("input", function(){
  document.getElementById('final_span').innerHTML += `&nbsp ${this.value}`;
});


window.setInterval(function() {
  document.getElementById('final_span').scrollTop = document.getElementById('final_span').scrollHeight;
}, 100);

<textarea id="text"></textarea>  
<span id="final_span" class="final" style="display:block; height:100px; overflow-y: scroll;"></span>

Answer 2

The best solution I could think of was to increase the scrolling of the text container with a function called with an event I use 'keyup' but when your program work with voice you can use change. the other function only display the input value on the div.

const input = document.querySelector('#text-field');
const div = document.querySelector('#text-display');

function pageScroll() {
        div.scrollBy(0,300);
}
function writeLines(){
   div.innerHTML = input.value;
   pageScroll();
}

input.addEventListener('keyup',writeLines);

<input id="text-field" type="text" placeholder="Escribe aqui"/>
<div id="text-display" style="height: 100px; overflow-y: scroll; width: 200px"></div>