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