javascript - 在聊天框中自动滚动 javascript 函数

Question

我如何在我的聊天框上实现向下滚动，因为我看不到实时消息。我希望在我的 div id 上调用它，我把我的风格溢出

<script>
  //scroll to bottom
  window.onload=toBottom;
  function toBottom(){
    window.scrollTo(0, document.body.scrollHeight);
  }//end of scroll to bottom
</script>

查看部分

<div class="scrollMessage w3-padding div" onload="toBottom" id="scroll" style="overflow-y:scroll;height: 460px;">
      <?php include 'getMessage.php'; ?>        
</div>

在第一次加载时它应该已经在最后一条消息上了

在实际的聊天对话中，它也会在最后一条消息中显示

Answer 1

这就是您要找的。希望对您有所帮助。

var objDiv = document.getElementById("scroll2"); //Obtain the ID of the chat div
window.onload = toBottom;
function toBottom() {
  objDiv.scrollTop = objDiv.scrollHeight; //Set the scroll offset position to the height of the chat div
}

<div id="scroll">
<div class="scrollMessage w3-padding div" onload="toBottom" id="scroll2" style="overflow-y:scroll;height: 200px;width:150px;">
  <!--<?php include 'getMessage.php'; ?>-->
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
  Random messages <br>
</div>
</div>