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

Posted 2023-02-21

【中文标题】使用 Javascript 更改内容后滚动到 div 的底部

【英文标题】：Scroll to bottom of div after changing contents using Javascript

【发布时间】：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 后调用滚动到底部的正确位置是什么？

【参考方案1】：

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

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

【讨论】：

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