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节点本身。

强制滚动条到底部jquery / css

1 个答案: