javascript - 将项目添加到 DOM 时的 Chrome 滚动行为

Question

我正在实现无限滚动以显示按日期分组的操作。当用户到达页面底部时，我加载下一个操作。

所以，滚动一点后，用户会看到这个:

-------------------------------------------
May, 23rd
  Operation 11
  Operation 12     This zone is visible
  Operation 13     by the user
  Operation 14
  Operation 15
  page bottom
-------------------------------------------
                    this zone is outside 
                    of the viewport
-------------------------------------------

到达底部时，将加载新操作。预期的行为是这样的:

-------------------------------------------
May, 23rd
  Operation 11
  Operation 12     This zone is visible
  Operation 13     by the user
  Operation 14
  Operation 15
-------------------------------------------
  Operation 16
  Operation 17
  Operation 18      this zone is outside 
  Operation 19      of the viewport
  Operation 20
  page bottom
 -------------------------------------------

加载对用户是透明的。滚动可以无缝地继续。 仅在 Chrome 中的实际行为是:

-------------------------------------------
  Operation 16
  Operation 17
  Operation 18      This zone is visible 
  Operation 19      by the user
  Operation 20
  page bottom
-------------------------------------------
                    this zone is outside 
                    of the viewport
-------------------------------------------

Chrome 似乎会自动滚动以保持最后一个元素可见(此处为页面底部)。这会导致无限加载下一个操作。

数据是一个映射 {[key: string]: Operation[]} 其中 key 是一个 date 表示为 字符串。

我是这样渲染的:

<section *ngFor="let entry of accountOperations | keyvalue:descOrder">
  <h3>{{entry.key}}</h3>
  <ul>
    <li *ngFor="let operation of entry.value">
      <app-operation [operation]="operation">
      </app-operation>
    </li>
  </ul>
</section>

问题:是否有我可以调用的 javascript 函数来停用此行为？

我准备了一个StackBlitz为了重现问题。请在 Chrome 中试试。

场景:

• 点击“向 map 添加类别”10 次
• 滚动到页面底部
• 再次点击“向 map 添加类别”3 次
• 页面底部仍然可见。它不应该。

奇怪的是，如果我使用带有 *ngFor 的简单列表(您可以使用另一个按钮进行测试:“将项目添加到列表”)，我不会重现该问题

此外，如果删除“Page Bottom”元素，我不会遇到问题。我想在这种情况下，Chrome 会关注列表的最后一个元素。

Answer 1

子元素上的一些 CSS 为我解决了这个问题。

以我为例:

.load-more{
  overflow-anchor: none;
}

答案取自这里: Stop automatic scrolling on page content change