调整文本大小后滚动跳转到页面底部

Question

我有一个 Angular 8 项目，它从服务器接收产品列表。由于每个用户的产品数量可能非常大，我只向用户发出请求并显示前 20 个项目，但是当他到达容器底部时，我又上传了 20 个项目。对于滚动检测，我使用infinite-scroll 库。一切正常，直到我添加了另一个 library，它会自动调整产品标题以适应容器宽度。添加后，滚动开始自动跳转到容器的末尾（到最新上传的项目），因此它会触发另一批附加项目的上传。在添加自动调整大小之前，用户停留在同一个地方（在前 20 个项目的末尾）。

我已经尝试了接下来的步骤：

1. 删除了无限滚动并编写了我自己的方法来检测用户何时 到达容器末端以上传新项目。结果：相同的行为 滚动下拉。
2. 删除了 fittext 库并编写了我自己的指令来调整文本大小 标签。结果：滚动跳转的行为相同。
3. 尝试将容器上的溢出切换为隐藏以防止滚动， 尝试更改 scrollTop 值。

没有任何帮助。每次加载新项目时，滚动仍会跳到末尾。但是当我删除自动调整大小功能时 - 一切正常，除了我没有自动调整大小..

也许有人有类似的问题，或者对如何防止滚动跳转有任何想法？ 谢谢！

这是我的html：

 <div class="prizes__wrapper" *ngIf="viewModel.prizes.items.length > 0" infinite-scroll [scrollWindow]="false"
      (scrolled)="scrollDown(this.viewModel.prizes, 0)">
      <div class="content-wrapper">
        <div class="outer__wrapper" *ngFor="let prize of viewModel.prizes.items; let i=index; first as isFirst">
          <div class="inner__wrapper">
            <div class="prize">
              <div class="image-wrapper">
                <div class="prize__date">
                  {{'claim_page_won_title' | translate:(prize.created | date:'mediumDate')}}
                </div>
                <div class="prize__image" [ngStyle]="{ 'background-image': 'url(' + prize.machineImage + ')' }">
                </div>
              </div>
              <div class="prize-controls">
                <div class="title-container">
                  <p class="title" appTextFit>{{prize.prizeShortName}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

溢出容器的样式：

    .prizes__wrapper
      height: 100%
      overflow-y: scroll
      scrollbar-width: none
      -ms-overflow-style: none

Answer 1

在 ngFor 元素上添加 trackBy 有助于解决该问题。

      <div class="machine" *ngFor="let machine of viewModel.machines; let i = index; trackBy: trackByFn">