我有以下聊天:
<div class="container">
<div class="jumbotron" id="chat" >
</div>
<form (submit)="sendUserQueryToServer()">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="search" autocomplete="off" [(ngModel)]="userQuery">
<div class="input-group-btn">
<button class="btn btn-info"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
使用以下 CSS:
#chat{
background: lightgray;
max-height: 60vh;
height:60vh;
overflow: auto;
font-size: 1.5em;
}
和脚本:
sendUserQueryToServer() {
$("#chat").append(this.userQuery + "<br \>" );
}
上面的代码进行了简化,只留下了相关的部分。
这是相同的代码,“转换”为纯 js:https://jsfiddle.net/wcukrLfk/8/ ,基本上做同样的事情,您所要做的就是按下小按钮(您需要按下大约 20 次才能看到行为)。
如您所见,聊天是可以滚动的,但是当超过最大高度时,它不会自动滚动到页面底部,它只会显示滚动条。如何让聊天自动滚动到页面底部?
最佳答案
使用此代码:
$('#chat')[0].scrollTop = $('#chat')[0].scrollHeight
关于Javascript - 自动滚动到聊天底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49753128/