Javascript - 自动滚动到聊天的底部

Question

I have the following chat:

<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>

With the following css:

#chat{
    background: lightgray;
    max-height: 60vh;
    height:60vh;
    overflow: auto;
    font-size: 1.5em;
}

and script:

sendUserQueryToServer() {
    $("#chat").append(this.userQuery + "<br \>" );
}

The code above is simplified, only the relevant portions are left.

Here is the same code, 'converted' to plain js: https://jsfiddle.net/wcukrLfk/8/ , basically does the same thing, all you have to do is press the small button (you will need to press it about 20 times to see the behavior).

As you can see, the chat is scrollable, but when the max-height gets overflown, it doesn't automatically scroll to the bottom of the page, it just shows the scrollbar. How can I make the chat auto-scroll to the bottom of the page?

Answer 1

使用此代码：

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