Using scrollHeight to scroll to the bottom not working with div-CodePudding

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?

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：

This solution uses a promise to scroll the window after the content is written to the div. The div will not scroll because it's overflow property is not set. The default value is visible.

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>