我创建了一个聊天室,其元素为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,对于我插入的很多聊天对象感到抱歉,以便您可以看到发生了什么:
最佳答案
使用文档高度似乎不合逻辑,这将得到聊天的确切溢出:
var chat = $("#chat-list"),
overflow = chat[0].scrollHeight-chat.height();
chat.animate({scrollTop: overflow}, 'slow');
获取 scrollHeight
时,使用纯 JS,因此使用 [0]
检索 DOM 节点本身。
关于javascript - 强制滚动条到底部 jquery/css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33226683/