【问题标题】：On iOS devices, why does Ionic 4 Infinite Scroll jump to the top of the page when the ionInfinite event is fired?在 iOS 设备上，为什么 Ionic 4 Infinite Scroll 在触发 ionInfinite 事件时会跳转到页面顶部？
【发布时间】：2023-03-07 18:35:01
【问题描述】：

错误报告

离子版本： [x] 4.x

当前行为： 在 iOS 设备上，当通过infinite scroll 组件将项目添加到列表时，屏幕会跳转到列表顶部。

这在网络（Chrome 或 Safari）或 Android 设备上不是问题。

预期行为： 向列表中添加项目不应影响屏幕滚动。用户应该会看到新帖子出现并继续正常滚动。

重现步骤：

在 Xcode 中构建应用程序
在设备上运行
开始向下滚动。点击帖子 5 后，您将被带到屏幕顶部（帖子 1）。

相关代码：

回购位于https://github.com/bennyt2/ionic-infinite-scroll-test。以下是两个相关文件：

src/app/home/home.page.html：使用 ion-infinite-scroll 的 HTML

<ion-content>
  <ng-container *ngFor="let post of posts;let i = index">
    <div class="post post-{{post % 2}}">Post {{post}}</div>
  </ng-container>

  <div class="no-posts-yet" *ngIf="posts.length === 0">No posts yet...</div>
  <div class="end-of-feed" *ngIf="allPostsLoaded">End of feed</div>

  <ion-infinite-scroll class="infinite-scroll" threshold="300px" (ionInfinite)="getMorePosts($event)">
    <ion-infinite-scroll-content loadingSpinner="circles" loadingText="Loading more posts...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>

src/app/home/home.page.ts：处理后检索和 ionInfinite 事件的组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-infinite-scroll-test',
  templateUrl: './infinite-scroll-test.page.html',
  styleUrls: ['./infinite-scroll-test.page.scss'],
})
export class InfiniteScrollTestPage implements OnInit {

  posts: number[] = [];
  maxPosts: number = 100;
  step: number = 5;
  loadedPosts: number = 0;
  allPostsLoaded: boolean = false;

  constructor() {
  }

  ngOnInit() {
    this.addPosts(5);
  }

  addPosts(number: number) {
    for (let i = 0; i < number; i++) {
      this.posts.push(this.posts.length + 1);
      this.loadedPosts = this.posts.length + 1;
    }
  }

  getMorePosts(event) {
    setTimeout(() => {
      this.addPosts(5);
      event.target.complete();

      // App logic to determine if all data is loaded
      // and disable the infinite scroll
      if (this.loadedPosts > this.maxPosts) {
        event.target.disabled = true;
        this.allPostsLoaded = true;
      }
    }, 500)
  }
}

离子信息： 从终端/cmd 提示符并在下面粘贴输出）：-->

Ionic:

   Ionic CLI                     : 5.4.1 (/home/spikefalcontwo/.nvm/versions/node/v10.15.3/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Capacitor:

   Capacitor CLI   : 1.4.0
   @capacitor/core : 1.4.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v10.15.3 (/home/spikefalcontwo/.nvm/versions/node/v10.15.3/bin/node)
   npm    : 6.11.3
   OS     : Linux 5.0

知道是什么原因造成的吗？

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

我遇到了同样的问题，ion-infinite-scroll 元素是 ion-content 的直接子元素。将其包装在 div 中后，问题就消失了。你可以试试看。

【讨论】：

感谢您的回复。您的意思是像这样将 ion-infinite-scroll 元素包装在 div 中吗？

【解决方案2】：

我也有同样的问题。在获取更多结果时，我有一个用于加载器的 *ngIf，所以每次加载更多结果时，我都会重置模板。检查您的 *ngIfs！

【讨论】：

我所要做的就是将它们替换为[style.display]="condition ? 'block' : 'none'。当然，更改条件和真值属性以满足您的需求。

【解决方案3】：

我遇到了类似的问题，但通过向我的 *ngFor 添加 trackBy 解决了它。这允许 Angular 进行更精细的 DOM 更新，即只添加新项目而不是重新渲染列表并导致滚动位置被重置。

有关如何使用 trackBy 的更多信息，请参阅 the official angular docs。

【讨论】：