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

【问题标题】：autoscroll javascript function in chatbox聊天框中的自动滚动 javascript 功能
【发布时间】：2017-12-09 22:50:46
【问题描述】：

我如何在我的聊天框中实现向下滚动，因为我看不到实时消息。我希望它在我的 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>

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

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

【问题讨论】：

标签： javascript jquery css chat autoscroll

【解决方案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>

【讨论】：

它不起作用可能是因为我的语法混乱：<div id="scroll"> <div class="chatMessage w3-padding div" onload="toBottom" style="overflow-y:scroll;height: 460px;"> <?php include 'getMessage.php'; ?> </div> </div>
我试图在顶部创建一个滚动 ID，因为 chatMessage 链接到 js 中的实时函数 function getMessages() { $.get('<?php echo base_url() ?>index.php/********/getMessage', function(data) { $(".chatMessage").html(data); }); } setInterval(function() { getMessages() },500);
@HanthonyTagam 然后只需为子 div 容器创建一个 id 并将名称从滚动替换为我刚刚编辑的 javascript 中的名称。如果有帮助，请标记答案，干杯。
感谢您的回答，我发现这是因为我的 w3-modal 是我使用的 css 框架。也许生病只是找到一个纯 css 模态然后。干杯，