使用 Javascript 更改内容后滚动到 div 底部

Question

出于某种原因，在使用 Ajax 刷新其内容后，滚动到 div 底部的方法对我不起作用。

我认为这个问题与 DOM 的工作方式有关——例如，当它进行更改时，但是，我对 javascript 或 DOM 了解不够，无法真正理解这将如何干扰滚动到底部。

所以我认为问题在于何时以及如何调用方法而不是方法本身。 谁能建议一种在 div 刷新后滚动到底部的方法？

滚动到底部的方法我正在尝试：

方法一：

var element = document.getElementById("chatBox");
    element.scrollTop = element.scrollHeight;

方法二：

document.getElementById('chatBox').scrollIntoView({ behavior: 'smooth', block: 'end' });

刷新div的方法：

function refreshDiv() { 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
alert("got 200");
document.getElementById("chatBox").innerHTML=xmlhttp.responseText;
alert("will now try to update Scroll");
//FOLLOWING HAS NO EFFECT POSSIBLY BECAUSE DOM HAS NOT YET RETURNED RESULTS
document.getElementById('chatBox').scrollIntoView({ behavior: 'smooth', block: 'end' });
    }
  }
xmlhttp.open("GET","refreshDiv.php,true);
xmlhttp.send();

return;
//THIS ALSO HAS NO EFFECT POSSIBLY AS IT IS AFTER RETURN
document.getElementById('chatBox').scrollIntoView({ behavior: 'smooth', block: 'end' });
  }

刷新div后调用滚动到底部的正确位置是什么？

Answer 1

使用此脚本滚动到 div 的底部

    var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;