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

【问题标题】：Scroll to bottom of div after changing contents using Javascript使用 Javascript 更改内容后滚动到 div 的底部
【发布时间】：2021-10-17 09:56:12
【问题描述】：

由于某种原因，在使用 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 后调用滚动到底部的正确位置是什么？

【问题讨论】：

标签： javascript ajax dom scroll

【解决方案1】：

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

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

【讨论】：

这是有问题的方法1。问题是在哪里以及如何调用它。