docs/cjs/ion-infinite-scroll.cjs.entry.js
/**
   * Call `complete()` within the `ionInfinite` output event handler when
   * your async operation has completed. For example, the `loading`
   * state is while the app is performing an asynchronous operation,
   * such as receiving more data from an AJAX request to add more items
   * to a data list. Once the data has been received and UI updated, you
   * then call this method to signify that the loading has completed.
   * This method will change the infinite scroll's state from `loading`
   * to `enabled`.
   */
Call `complete()` within the `ionInfinite` output event handler when
your async operation has completed. For example, the `loading`
state is while the app is performing an asynchronous operation,
such as receiving more data from an AJAX request to add more items
to a data list. Once the data has been received and UI updated, you
then call this method to signify that the loading has completed.
This method will change the infinite scroll's state from `loading`
to `enabled`.
Call ` complete () ` within the ` ionInfinite ` output event handler when your async operation has completed . For example the ` loading ` state is while the app is performing an asynchronous operation such as receiving more data from an AJAX request to add more items to a data list . Once the data has been received and UI updated you then call this method to signify that the loading has completed . This method will change the infinite scroll ' s state from ` loading ` to ` enabled ` .
async complete() {
    const scrollEl = this.scrollEl;
    if (!this.isLoading || !scrollEl) {
      return;
    }
    this.isLoading = false;
    if (this.position === 'top') {
      this.isBusy = true;
      const prev = scrollEl.scrollHeight - scrollEl.scrollTop;
      requestAnimationFrame(() => {
        index.readTask(() => {
          const scrollHeight = scrollEl.scrollHeight;
          const newScrollTop = scrollHeight - prev;
          requestAnimationFrame(() => {
            index.writeTask(() => {
              scrollEl.scrollTop = newScrollTop;
              this.isBusy = false;
            });
          });
        });
      });
    }
  }
async complete ( ) { const scrollEl = this . scrollEl ; if ( ! this . isLoading || ! scrollEl ) { return ; } this . isLoading = false ; if ( this . position === 'top' ) { this . isBusy = true ; const prev = scrollEl . scrollHeight - scrollEl . scrollTop ; requestAnimationFrame ( ( ) => { index . readTask ( ( ) => { const scrollHeight = scrollEl . scrollHeight ; const newScrollTop = scrollHeight - prev ; requestAnimationFrame ( ( ) => { index . writeTask ( ( ) => { scrollEl . scrollTop = newScrollTop ; this . isBusy = false ; } ) ; } ) ; } ) ; } ) ; } }
Call `complete()` within the `ionInfinite` output event handler when
 your async operation has completed.
Call ` complete () ` within the ` ionInfinite ` output event handler when your async operation has completed .
/**
       * New content is being added at the top, but the scrollTop position stays the same,
       * which causes a scroll jump visually. This algorithm makes sure to prevent this.
       * (Frame 1)
       *    - complete() is called, but the UI hasn't had time to update yet.
       *    - Save the current content dimensions.
       *    - Wait for the next frame using _dom.read, so the UI will be updated.
       * (Frame 2)
       *    - Read the new content dimensions.
       *    - Calculate the height difference and the new scroll position.
       *    - Delay the scroll position change until other possible dom reads are done using _dom.write to be performant.
       * (Still frame 2, if I'm correct)
       *    - Change the scroll position (= visually maintain the scroll position).
       *    - Change the state to re-enable the InfiniteScroll.
       *    - This should be after changing the scroll position, or it could
       *    cause the InfiniteScroll to be triggered again immediately.
       * (Frame 3)
       *    Done.
       */ // ******** DOM READ **************** // Save the current content dimensions before the UI updates // ******** DOM READ **************** // UI has updated, save the new content dimensions // New content was added on top, so the scroll position should be changed immediately to prevent it from jumping around // ******** DOM WRITE ****************