javascript - 强制滚动条到底部 jquery/css

Question

我创建了一个聊天室，其元素为li。我希望它始终粘在底部。当聊天数量大约为 10-20 时它工作正常，但之后它会中途停止。我认为高度有问题，但我无法弄清楚这是我的 html :

<div id="chat-main">
  <ul id="chat-list">
    //I dynamically add <li>s using ajax
  </ul>
</div>
<div id="message-panel">
  <form class="form-inline" id="messageForm">
    <input id="message-value" type="text" autocomplete="off" maxlength="510"  placeholder="Type your message...">
  </form>
</div>

这是我的 CSS:

#chat-main {
  height: 84%;
  border: 2px solid #d8d7cf;
}

#chat-list {
  height: 100%;
  overflow-y: scroll;
}

#chat-main>ul {
  padding-left: 10px;
  list-style-type: none;
}

这是用于滚动的 jquery 代码:

 $("#chat-list").animate({ scrollTop: $(document).height() }, "slow")

我真的很困惑，不知道出了什么问题。

编辑:这是我的 jsfiddle，对于我插入的很多聊天对象感到抱歉，以便您可以看到发生了什么:

<强> http://jsfiddle.net/L8msx/19/

Answer 1

使用文档高度似乎不合逻辑，这将得到聊天的确切溢出:

http://jsfiddle.net/1yLzkgw8/

var chat = $("#chat-list"),
overflow = chat[0].scrollHeight-chat.height(); 

chat.animate({scrollTop: overflow}, 'slow');

获取 scrollHeight 时，使用纯 JS，因此使用 [0] 检索 DOM 节点本身。