Javascript/Typescript 滚动到 DIV 的底部答案

【问题标题】：Javascript/Typescript Scroll to Bottom of DIVJavascript/Typescript 滚动到 DIV 的底部
【发布时间】：2023-04-01 04:46:01
【问题描述】：

当我向 DIV 推送新行时，我无法让它正确滚动到 DIV 的底部。它向下滚动到底部，除了最后一行，我不知道为什么。我尝试过的事情：

var objDiv = document.getElementById("gameArea");
objDiv.scrollTop = objDiv.scrollHeight;

和

var objDiv = document.getElementById("gameArea");
objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;

我还为底部输入的行类尝试了 scrollIntoView()，但也没有用。

全功能：

pushText(input : string) {
    this.inputs.push(input)
    var objDiv = document.getElementById("gameArea");
    objDiv.scrollTop = objDiv.scrollHeight - objDiv.clientHeight;
  }

HTML如下：

<div class="mb-3" style="width: 70%; margin:auto;">
  <label for="gameArea" class="form-label">Escape!</label>
  <div class="form-control" id="gameArea">
    <div class="read" *ngFor="let i of this.inputs">{{i}}</div>
  </div>
  <form [formGroup]="formgroup" (ngSubmit)="update()">
  <input class="form-control input" type="text" formControlName="input" [ngStyle]="formgroup.controls.input.invalid && formgroup.controls.input.touched ? {'border': 'red solid 2px'} : {'border':'none'}" required placeholder="Type here, player." aria-label="type here">
  <button class="btn btn-primary" [disabled]="formgroup.controls.input.invalid" type="submit">Submit</button>
</form>
</div>

CSS：

#gameArea {
  background-color:#fff;
  height: 300px;
  overflow: scroll;
}

【问题讨论】：

您没有提供推送新行然后调用滚动更新的代码，所以这只是一个想法。也许当您调整 scrollTop 时，您的 UI 尚未使用新行更新。您可以尝试等到 UI 更新，一个简单的技巧就是将您的代码包装在 setTimeout 函数中。
@westefan 天哪，你是对的。 setTimeout 为它工作。虽然添加了上面的完整功能，但我只是认为它是逐行运行的。
听起来有人有机会回答他们自己的问题 :)

标签： javascript html css angular

【解决方案1】：

根据@westfan 的评论，这是有效的！：

setTimeout(() => {
  var objDiv = document.getElementById("gameArea");
  objDiv.scrollTop = objDiv.scrollHeight;
},0)

UI 在滚动运行之前没有及时更新。

【讨论】：