聊天框中的自动滚动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>