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

Question

For some reason the methods to scroll to bottom of div are not working for me after refreshing its contents using Ajax.

I think the issue has something to do with how the DOM works--eg when it makes its changes, however, I don't know enough about javascript or the DOM to really understand how that would interfere with scrolling to bottom.

So I think the issue is when and how to call the methods rather than the methods themselves. Can anyone suggest a way to scroll to bottom after the refresh of div?

Methods to scroll to bottom I am trying:

Method 1:

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

Method 2:

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

Method that refreshes 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' });
  }

What is the proper place to call scroll to bottom after refreshing div?

Answer 1

use this script to scroll to bottom of div

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