自动滚动 div

Question

我有一个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>

Answer 1

您可以通过设置聊天窗口div 的scrollTop 属性来完成此操作。要滚动到 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 添加聊天消息时调用它。