infinite scroll code example

Example 1: ionic infinite scroll

<ion-content>
  <ion-button (click)="toggleInfiniteScroll()" expand="block">
    Toggle Infinite Scroll
  </ion-button>

  <ion-list></ion-list>

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

import { Component, ViewChild } from '@angular/core';
import { IonInfiniteScroll } from '@ionic/angular';

@Component({
  selector: 'infinite-scroll-example',
  templateUrl: 'infinite-scroll-example.html',
  styleUrls: ['./infinite-scroll-example.css']
})
export class InfiniteScrollExample {
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

  constructor() {}

  loadData(event) {
    setTimeout(() => {
      console.log('Done');
      event.target.complete();

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

  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
  }
}

Example 2: infinite scroll javascript

<div class="article-feed">
  <!-- .articles will be added to .article-feed -->
  <article class="article">...</article>
  <article class="article">...</article>
  ...
</div>

<!-- status elements -->
<div class="scroller-status">
  <div class="infinite-scroll-request loader-ellips">
    ...
  </div>
  <p class="infinite-scroll-last">End of content</p>
  <p class="infinite-scroll-error">No more pages to load</p>
</div>

<!-- pagination has path -->
<p class="pagination">
  <a class="pagination__next" href="page2.html">Next page</a>
</p>

Example 3: infinite scroll within a div

<script>
$(function(){
    $(window).scroll(function () {
        var $div = $(".scrollme");
        var divPlacement = parseInt($div.offset().top + parseInt($div.height()));
 
        var screenBottom = $(this).scrollTop() + parseInt($(window).height());
        divPlacement -= 300; //load contents before reaching to the end of the div
 
        if(divPlacement <= screenBottom) {
            $('.scrollme').append('<p style="height: 300px; background-color: '+getRandomColor()+'"></p>');
        }
 
        //TODO:: Unbind scroll event if there are no more contents
    });
});
 
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
</script>