使用 scrollHeight 滚动到底部不适用于 div

Question

我想让div 始终滚动到内容的底部。我的解决方案适用于textarea，但不适用于div，我不知道为什么。

我有以下代码：

使用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>

使用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>

我发现如果我使用textarea 而不是div，scrollTop = scrollHeight 将起作用并且将始终滚动到底部，但如果我使用div，它将不起作用。

谁能向我解释为什么这不起作用？

Answer 1

将 div 的溢出设置为滚动会改变其行为以匹配文本区域。

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

这就是你希望 div 响应的方式吗？

Answer 2

此解决方案使用承诺在将内容写入 div 后滚动窗口。 div 不会滚动，因为它的溢出属性未设置为滚动。默认值可见。

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>