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

聊天框中的自动滚动 javascript 功能

autoscroll javascript function in chatbox

javascript

jquery

css

chat

autoscroll