如何将充当聊天窗口的div-element滚动到底部？
如何将充当聊天窗口的div-element滚动到底部？
提问于 2016-09-18 17:33:05
我已经为我的问题准备了一个jsFiddle：
我正尝试在一个多人游戏中使用(黄色) div元素进行聊天。
不幸的是，div不会滚动到我append()到它的最新行。
$('#chatBtn').button().click(function(e) {
e.preventDefault();
var str = $('#chatInput').val();
$('#chatInput').val('');
$('#chatDiv').append('<br>' + str);
var h = $('#chatDiv').attr('scrollHeight');
//$('#chatDiv').scrollTop(h);
$('#chatDiv').animate({ // DOES NOT SCROLL TO DIV BOTTOM, WHY?
scrollTop: h
}, 1000);
});
$('#chatInput').on('input', function(e) { // ENABLES/DISABLES BUTTON, WORKS OK
var str = $('#chatInput').val();
$('#chatBtn').button(str.length > 0 ? 'enable' : 'disable');
});@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css");
div#chatDiv {
margin: 0 auto;
background-color: yellow;
width: 400px;
height: 100px;
overflow: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<div id="chatDiv"></div>
<p align="center">
<input id="chatInput" type="text" size="40" />
<button id="chatBtn" disabled>Send</button>
</p>
请在chatInput中输入4-5个单词，然后每次单击chatBtn -您将看到问题:底线未显示，chatDiv-element未向下滚动。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-09-18 18:48:43
下面的行不会给出高度
var h = $('#chatDiv').attr('scrollHeight');将上面的代码行替换为
var h =$('#chatDiv').prop('scrollHeight');与使用输入事件不同，您可以在单击按钮时设置一个条件
$(document).ready(function() {
$('#chatBtn').click(function(e) {
e.preventDefault();
var str = $('#chatInput').val().trim();
if(str !== ''){
$('#chatInput').val('');
$('#chatDiv').append('<br>' + str);
var h =$('#chatDiv').prop('scrollHeight');
$('#chatDiv').animate({
scrollTop: h
}, 1000);
}
});
});如果你删除了输入事件，那么不要忘了从按钮中删除禁用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39556140
复制相关文章
相似问题
腾讯云开发者
