0

divチャットボックスを含むがあります。新しいメッセージが届くたびに、そのメッセージがボックスに追加されます。ボックスを自動的に一番下までスクロールします（新しいメッセージを表示するため）。どうすればこれを達成できますか？

<div  id="chatting" style="overflow: auto; background-color: #fff; border: solid 2px #dedede; width: 600px;  height: 500px; padding: 10px;">
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
  hello<br/>
</div>
4

1 に答える 1

5

scrollTopこれは、チャットウィンドウのプロパティを設定することで実現できますdiv。divの一番下までスクロールするには、次のように設定scrollTopしscrollHeightます。

var chatWindow = document.getElementById('chating');
chatWindow.scrollTop = chatWindow.scrollHeight;​

http://jsfiddle.net/Ln8Hd/

または、jQueryを使用します。

var chatWindow = $("#chating");
chatWindow.scrollTop(chatWindow[0].scrollHeight);

チャットメッセージがdivに追加されるたびに、これを呼び出す必要があります。

于 2012-12-11T17:34:33.917 に答える