add experimental infinite scroll fix

2026-03-13 10:22:08 +08:00 · 2024-02-07 16:27:52 -05:00
2 changed files with 69 additions and 30 deletions
--- a/core/src/components/infinite-scroll/infinite-scroll.tsx
+++ b/core/src/components/infinite-scroll/infinite-scroll.tsx
@@ -84,6 +84,9 @@ export class InfiniteScroll implements ComponentInterface {
   */
  @Event() ionInfinite!: EventEmitter<void>;

+
+  private scrollHeight: number = 0;
+
  async connectedCallback() {
    const contentEl = findClosestIonContent(this.el);
    if (!contentEl) {
@@ -102,6 +105,33 @@ export class InfiniteScroll implements ComponentInterface {
    }
  }

+  async componentDidLoad() {
+    const contentEl = findClosestIonContent(this.el)!;
+    const scrollEl = await getScrollElement(contentEl);
+    const mo = new MutationObserver(async () => {
+      // wait for items to by hydrated so they have a dimension
+      const item = document.querySelectorAll('ion-item');
+      const lastItem = item[0];
+      await lastItem.componentOnReady();
+
+      // restore scroll position
+      const newScrollTop = scrollEl.scrollHeight - this.scrollHeight;
+
+      // TODO not sure why we need to set scrollTop twice
+      // TODO every once in a while the first ionInfinite callback
+      // still has a flicker
+      scrollEl.scrollTop = newScrollTop;
+      requestAnimationFrame(() => {
+        scrollEl.scrollTop = newScrollTop;
+      });
+
+      this.isBusy = false;
+      this.didFire = false;
+    });
+
+    mo.observe(findClosestIonContent(this.el)!, { subtree: true, characterData: true, childList: true });
+  }
+
  disconnectedCallback() {
    this.enableScrollEvents(false);
    this.scrollEl = undefined;
@@ -132,6 +162,10 @@ export class InfiniteScroll implements ComponentInterface {
      if (!this.didFire) {
        this.isLoading = true;
        this.didFire = true;
+
+        // cache the scroll position before the DOM updates
+        this.scrollHeight = scrollEl.scrollHeight;
+
        this.ionInfinite.emit();
        return 3;
      }
@@ -179,28 +213,6 @@ export class InfiniteScroll implements ComponentInterface {
       *    Done.
       */
      this.isBusy = true;
-      // ******** DOM READ ****************
-      // Save the current content dimensions before the UI updates
-      const prev = scrollEl.scrollHeight - scrollEl.scrollTop;
-
-      // ******** DOM READ ****************
-      requestAnimationFrame(() => {
-        readTask(() => {
-          // UI has updated, save the new content dimensions
-          const scrollHeight = scrollEl.scrollHeight;
-          // New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around
-          const newScrollTop = scrollHeight - prev;
-
-          // ******** DOM WRITE ****************
-          requestAnimationFrame(() => {
-            writeTask(() => {
-              scrollEl.scrollTop = newScrollTop;
-              this.isBusy = false;
-              this.didFire = false;
-            });
-          });
-        });
-      });
    } else {
      this.didFire = false;
    }
--- a/core/src/components/infinite-scroll/test/basic/index.html
+++ b/core/src/components/infinite-scroll/test/basic/index.html
@@ -12,6 +12,7 @@
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
  </head>

  <body>
@@ -19,42 +20,49 @@
      <ion-header>
        <ion-toolbar>
          <ion-title>Infinite Scroll - Basic</ion-title>
+          <ion-buttons slot="end">
+            <ion-button onclick="doScroll()">scroll to top</ion-button>
+          </ion-buttons>
        </ion-toolbar>
      </ion-header>

      <ion-content class="ion-padding" id="content">
-        <ion-button onclick="toggleInfiniteScroll()" expand="block"> Toggle InfiniteScroll </ion-button>
-
-        <ion-list id="list"></ion-list>
-
-        <ion-infinite-scroll threshold="100px" id="infinite-scroll">
+        <ion-infinite-scroll position="top" threshold="100px" id="infinite-scroll">
          <ion-infinite-scroll-content loading-spinner="crescent" loading-text="Loading more data...">
          </ion-infinite-scroll-content>
        </ion-infinite-scroll>
+
+        <ion-list id="list"></ion-list>
      </ion-content>
    </ion-app>

    <script>
      const list = document.getElementById('list');
      const infiniteScroll = document.getElementById('infinite-scroll');
+      const content = document.querySelector('ion-content');

+      let count = 0;
      function toggleInfiniteScroll() {
        infiniteScroll.disabled = !infiniteScroll.disabled;
      }

      infiniteScroll.addEventListener('ionInfinite', async function () {
        await wait(500);
-        infiniteScroll.complete();
+
        appendItems();
+        infiniteScroll.complete();
+
        // Custom event consumed in the e2e tests
        window.dispatchEvent(new CustomEvent('ionInfiniteComplete'));
      });

      function appendItems() {
-        for (var i = 0; i < 30; i++) {
+        const c = count;
+        for (var i = count; i < c + 30; i++) {
          const el = document.createElement('ion-item');
          el.textContent = `${1 + i}`;
-          list.appendChild(el);
+          list.prepend(el);
+          count += 1;
        }
      }

@@ -67,6 +75,25 @@
      }

      appendItems();
+
+    // this piece is only needed if items are Ionic components instead of divs
+      // wait for Angular to load items into the DOM
+      const observer = new MutationObserver(async () => {
+        const firstItem = document.querySelector('ion-item');
+
+        // wait for item component to be hydrated
+        await firstItem.componentOnReady();
+
+        observer.disconnect();
+
+        content.scrollToBottom();
+      });
+
+      observer.observe(list, { childList: true });
+
+      const doScroll = () => {
+        content.scrollToTop();
+      }
    </script>
  </body>
 </html>