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 次才能看到行为)。

如您所见，聊天是可以滚动的，但是当超过最大高度时，它不会自动滚动到页面底部，它只会显示滚动条。如何让聊天自动滚动到页面底部？

Answer 1

使用此代码:

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