Javascript - 自动滚动到聊天底部

Question

我有以下聊天：

<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 次查看行为）。

如您所见，聊天是可滚动的，但是当 max-height 溢出时，它不会自动滚动到页面底部，它只会显示滚动条。如何让聊天自动滚动到页面底部？

Answer 1

使用此代码：

$('#chat')[0].scrollTop = $('#chat')[0].scrollHeight