ページがロードされたときにデフォルトでスクロールダウンを維持する方法

私はajaxとphpで1対1のチャットを開発しました。新しいメッセージ投稿やページがあるときは、ロードされたメッセージは、データベースページがロードされたときにデフォルトでスクロールダウンを維持する方法

 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>

から来ています

出典

2017-01-24 mc140402713 Qamar Hyder

最近チャットアプリケーションで同じ問題が発生しました。

あなたのメッセージリスト（この場合はul）を含む要素を意味するメッセージリストにIDを設定するか、希望する他のセレクタを使用して、新しいメッセージを受信するたびにあなたは最初にあなたのメッセージを得る：注意する

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

ことの一つは、あなたのコンテナ要素は、（再び、この場合には<ul>があなたのCSSで指定した高さとoverflow:scrollを持っている必要がありますということです

あなたドン場合。あなたのコンテナ要素の高さを指定したい、あるいはそのコンテナ要素のオーバーフローを設定したい要素あなただけの体の一番下までスクロールすることができます：あなたの答えのための

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

出典

2017-01-24 15:07:01 roselpadilla

おかげで、それは私がこの問題を解決するために、2つの日を過ごす持って働いていました - –

ページがロードされたときにデフォルトでスクロールダウンを維持する方法

答えて

関連する問題