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

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!

CodePudding user response：

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?

CodePudding user response：

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>