Question

我已经开发了与ajax和php的一对一聊天现在请任何人告诉我当新邮件发布或加载页面时，如何保持我的聊天窗口向下滚动底部消息来自数据库

       function getmsg(){
          msg = document.getElementById('msg').value

            var xmlhttp=new XMLHttpRequest();
         xmlhttp.onreadystatechange=function() {
       if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        document.getElementById("suggestion").innerHTML=xmlhttp.responseText;
        document.getElementById('msg').value = '';
         }

       }
       if(msg==''){
         xmlhttp.open("GET","chat",true);
         xmlhttp.send();   
       }else{
        xmlhttp.open("GET","chat?message="+msg,true);
         xmlhttp.send();
     }

 }


<body onload="getmsg();">


<div class="header">

    <div id="chat_box" class="chat_window"><div class="top_menu"><div class="buttons"><div class="button close"></div><div class="button minimize"></div><div class="button maximize"></div></div><div class="title">Messaging about order-id: ODR-46</div></div>


        <div id="your_div">
            <ul class="messages" >
           <li id="suggestion">

              messages will show here coming from database
           </li>


       </ul>

     </div>




       <div class="bottom_wrapper clearfix"><div class="message_input_wrapper"><input class="message_input" onkeydown="if (event.keyCode == 13) document.getElementById('send').click()" id="msg" placeholder="Type your message here..." /></div><a  id="send" onclick="return getmsg();" href="#tab"><div class="send_message"><div class="icon"></div><div class="text" >Send</div></div></a></div></div><div class="message_template"><div class="avatar"></div><div class="text_wrapper"><div class="text"></div></div></div>


</body>

Answer 1

我最近在聊天应用程序中遇到了同样的问题。

您可以在消息列表中设置ID（或使用您希望的任何其他选择器），这意味着包含您的消息的元素（在本例中为ul），然后在收到新消息时或在您处理时执行以下操作最初得到你的消息：

...
var msgList = document.getElementById("msg-list");
msgList.scrollTop = msgList.scrollHeight;
...

需要注意的一点是，您的容器元素（在这种情况下，<ul>再次必须在您的CSS中具有指定的高度和overflow:scroll。

如果您不想为容器元素指定设置高度和/或设置元素的溢出，您只需滚动到正文的底部：

document.body.scrollTop = document.body.scrollHeight;

如何在加载页面时默认向下滚动

1 个答案: