聊天框中的自動滾動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>