2
我已经准备好了我的问题jsFiddle:如何将作为聊天窗口的div元素滚动到底部?
我试图用一个(黄色)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>
请输入4-5字为chatInput
,然后单击chatBtn
每一次 - 你会看到问题:底部线没有显示,chatDiv
- 元素不会向下滚动。
不幸的是'var h = $('#chatDiv')。height();'不能解决问题。请在[我的jsFiddle](https://jsfiddle.net/afarber/40wgdL8w/)中输入4-5行,然后单击“发送”按钮 - 您将看到div不滚动到底部。 –
我已经更新了我的答案,你可以使用var h = $('#chatDiv')。prop('scrollHeight');我希望这会解决你的问题。 –