Using scrollHeight to scroll to the bottom not working with div

Issue

I want to make the div always scroll to the bottom of the content. My solution works for textarea, but it is not working for div and I don't know why.

I have the following code:

Using textarea:

var i = 0;
var txt = 'Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for $1.8 billion.[12]'
function type(){
  if (i < txt.length) {
    document.querySelector('textarea').scrollTop =  document.querySelector('textarea').scrollHeight
    document.querySelector('textarea').innerHTML += txt.charAt(i);
    i++;
    setTimeout(type,1)
  }
  }
  type()

<textarea ></textarea>

Using div:

var i = 0;
var txt = 'Stack Overflow is a question and answer website for professional and enthusiast programmers. It is the flagship site of the Stack Exchange Network,[4][5][6] created in 2008 by Jeff Atwood and Joel Spolsky.[7][8] It features questions and answers on a wide range of topics in computer programming.[9][10][11] It was created to be a more open alternative to earlier question and answer websites such as Experts-Exchange. Stack Overflow was sold to Prosus, a Netherlands-based consumer internet conglomerate, on 2 June 2021 for $1.8 billion.[12]'
function type(){
if (i < txt.length) {
    document.querySelector('div').scrollTop =  document.querySelector('div').scrollHeight
    document.querySelector('div').innerHTML += txt.charAt(i);
    i++;
    setTimeout(type,1)
  }
  }
  type()

div{
width:100px;
height:100px;
}

<div></div>

I find that if I use a textarea instead of using a div, the scrollTop = scrollHeight will work and will always scroll to the bottom, but if I use div, it won't work.

Could anyone explain to me why this doesn't work?

Solution

Setting you div's overflow to scroll will change its behavior to match the text area.

div {
   width:100px;
   height:100px;
   overflow: scroll;
}

Is that how you wanted the div to respond?

Answered By - Sam Kingston