Javascript 如何确保我可以在AJAX聊天中向上滚动

我正在构建一个vanillaJS、AJAX聊天工具（因此nojQuery或其他工具包）。消息通过AJAX加载并放入使用overflow-y:scroll的div中；因此，您可以滚动浏览所有消息

因为最新消息显示在底部，所以我有一个scrollDown（）函数，可以滚动到div的末尾：

function scrollDown()
{
    var objDiv = document.getElementById("chatbox");
}

问题是我无法向上滚动。如果我那样做，我会再次陷入困境。这是因为每次调用ajax时，我都会向下滚动。但是我如何确保如果用户在div中向上滚动（因此他/她正在阅读过去的消息），那么当AJAX更新时，它不会向下滚动

我已经用div.scrollHeight和div.scrollTop尝试了一些东西，但不幸的是它没有起作用。我也做了很多谷歌搜索，但也不走运，大多数都是jQuery。这是我的密码

<script type="text/javascript">


getBerichten();

function getHTTPObject(){
   if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP");
   else if (window.XMLHttpRequest) return new XMLHttpRequest();
   else {
      alert("Your browser does not support AJAX.");
      return null;
   }
}   

function doWork(id, user_id) {    
    nieuwbericht = getHTTPObject();
    if (nieuwbericht != null) {

        if( document.getElementById('bericht').value != "")
        {

        nieuwbericht.open("GET", "ajaxberichten.php?id=" + id + "&user_id=" + user_id + "&bericht="
                        + document.getElementById('bericht').value, true);

        nieuwbericht.send(null); 
        document.getElementById("bericht").value = "";
        }
    }
}

function setOutput()
{
    if(httpObject.readyState == 4){
        document.getElementById('berichten').innerHTML = httpObject.responseText;
        bericht = document.getElementById('chatbox');

        scrollDown();

        setInterval(getBerichten(),1000);


    }
}

function getBerichten()
{
    httpObject = getHTTPObject();

    if (httpObject != null) 
    {
        httpObject.open("GET", "ajaxgetberichten.php?id=<?php echo $_GET['id'] ?>", true);

        httpObject.send(null);
        httpObject.onreadystatechange = setOutput;
    }
}

function scrollDown()
{
    var objDiv = document.getElementById("chatbox");
    objDiv.scrollTop = objDiv.scrollHeight;
}


</script>


<div class="postbox">

    <div class="post">

        <div class="chatbox" id="chatbox">
            <div id="berichten"></div>
        </div>

        <form method="post" action="">
            <textarea name="bericht" id="bericht"rows="20" cols="85"> </textarea>
            <input name="verstuur" type="button" onclick="doWork(<?php echo $_GET["id"] ?>, <?php echo $user_id ?>);" value="Verstuur"/>
        </form>  

    </div>
</div> 

getBerichten（）；
函数getHTTPObject（）{
if（window.ActiveXObject）返回新的ActiveXObject（“Microsoft.XMLHTTP”）；
else if（window.XMLHttpRequest）返回新的XMLHttpRequest（）；
否则{
警报（“您的浏览器不支持AJAX。”）；
返回null；
}
}   
函数doWork（id，用户id）{
nieuwbericht=getHTTPObject（）；
if（nieuwbericht！=null）{
if（document.getElementById（'bericht'）.value！=“”）
{
nieuwbericht.open（“GET”，“ajaxberichten.php？id=“+id+”&user\u id=“+user\u id+”&bericht=”
+document.getElementById（'bericht'）。值，true）；
nieuwbericht.send（空）；
document.getElementById（“bericht”）.value=“”；
}
}
}
函数setOutput（）
{
if（httpObject.readyState==4）{
document.getElementById（'berichten'）。innerHTML=httpObject.responseText；
bericht=document.getElementById（'chatbox'）；
向下滚动（）；
setInterval（getBerichten（），1000）；
}
}
函数getBerichten（）
{
httpObject=getHTTPObject（）；
if（httpObject！=null）
{
open（“GET”，“ajaxgetberichten.php？id=”，true）；
httpObject.send（空）；
httpObject.onreadystatechange=setOutput；
}
}
函数scrollDown（）
{
var objDiv=document.getElementById（“聊天盒”）；
objDiv.scrollTop=objDiv.scrollHeight；
}