Use scrollHeight to scroll to the bottom, but doesn't work for div

Question

I want to make the div always scroll to the bottom of the content, however, I fail to do that, but my solution works for textarea . I don't know why.

I have the following code:

Use 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>

Use 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 use textarea instead of using 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?

Thanks for any responds!

Answer 1

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?

Answer 2

 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]' const divEl = document.querySelector('div'); function type(i, resolve, reject){ if (i < txt.length) { divEl.innerHTML += txt.charAt(i); i++; setTimeout(()=> type(i,resolve,reject),1) } else { resolve(); } } async function writeContent() { await new Promise((resolve, reject) => { type(1, resolve, reject); }); window.scrollTo({ top: divEl.scrollHeight, left: 0, behavior: 'smooth' }); } writeContent();

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

 <div></div>