JavaScript/TypeScript 滚动到 DIV 底部

Question

我无法使这个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如下：

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

- Madeirey

---

你没有提供将新行推入并调用滚动更新的代码，所以这只是一个想法。也许当你调整scrollTop时，你的UI还没有更新到新的行。你可以尝试等待UI更新，一个简单的技巧是将你的代码包装在setTimeout函数中。 - west efan

@westefan 哇哦，你说得对。setTimeout 对它起作用了。虽然我在上面添加了完整的函数，但我只是以为它是逐行运行的。 - Madeirey

听起来好像有人有机会回答自己的问题 :) - AGE

Answer 1

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

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

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

- Madeirey