强制滚动条到底部jquery/css
问题描述:
我已经创建了一个聊天室,其元素是li
。我希望它始终坚持到底。当聊天的数量是10-20时,它可以正常工作,但之后会中途停止。我觉得有什么不对的高度,但我想不出它在这里是我的html:强制滚动条到底部jquery/css
<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对不起,我插了很多聊天的对象,所以你可以看看会发生什么:
答
使用文件的高度似乎不符合逻辑的,这将让聊天的确切溢出:
var chat = $("#chat-list"),
overflow = chat[0].scrollHeight-chat.height();
chat.animate({scrollTop: overflow}, 'slow');
当得到scrollHeight
时,使用普通的JS,因此DOM节点本身通过[0]
进行检索。
你是上帝谢谢你 –