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 \>" );
}

上面的代码被简化，只剩下相关部分。

以下是相同的代码，＆＃39;已转换为＆＃39;对于简单的js：https://jsfiddle.net/wcukrLfk/8/，基本上做同样的事情，你只需要按下小按钮（你需要按它约20次才能看到行为）。

正如您所看到的，聊天是可滚动的，但是当最大高度溢出时，它不会自动滚动到页面底部，它只显示滚动条。如何将聊天自动滚动到页面底部？

Answer 1

使用此代码：

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

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

1 个答案: