Sunday, 24 September 2017

How to Implement scrollToBottom and scrollToTop in Ionic 2 / Ionic 3.

The Content component in ionic is the place where you write your apps ui part, it provides an easy to use content area with some methods to control the scrollable area. There should only be one content in a single view component. you may be in a situation where, you want to scroll to the bottom of the content. this post explains you on how to scroll to bottom of the page & how to scroll to bottom of the page or to a particular position in the content area. This post assumes that you already have a working ionic project.

Copy & Paste the below Html code to your ionic page.


 <ion-header>
  <ion-navbar>
    <ion-title>Content Scroll</ion-title>
  </ion-navbar>
    <ion-toolbar>
      <ion-grid>

        <ion-row>

          <ion-col col-4>
            <button ion-button block color="danger" (click)="scrollToBottom()">Scroll to Bottom</button>
          </ion-col>

          <ion-col col-4>  
            <button ion-button block color="danger" (click)="scrollToTop()">Scroll to Top</button>
          </ion-col>

          <ion-col col-4>
            <button ion-button block color="danger" (click)="scrollTo()">Scroll to Position</button>
          </ion-col>

        </ion-row>

      </ion-grid>
  </ion-toolbar>
</ion-header>
<ion-content>

  <ion-list no-lines>
   <button ion-item *ngFor="let item of items" style="background: #cdcfd2;margin-bottom: 4px;">
     {{ item }}
   </button>  
  </ion-list>

</ion-content>

<ion-footer>
  <ion-toolbar >
    <ion-title>Powered By IonicSync.com</ion-title>
  </ion-toolbar>
</ion-footer>
Above, code has nothing special, it has ion-header with three buttons that call, three methods scrollToBottom,scrollToTop & scrollTo.

Copy & Paste the below ts code to your Component ts file.



import { Component, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams,Content } from 'ionic-angular';
/**
 * Generated class for the ContentResizePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-content-resize',
  templateUrl: 'content-resize.html',
})
export class ContentResizePage {
  @ViewChild(Content) content: Content;

  public items:any = [];

  constructor(public navCtrl: NavController, public navParams: NavParams) {
   for(let i=0;i<300;i++){
    this.items.push("item"+"-"+i);
   }
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ContentResizePage');
  }
  
  scrollTo() {
    // set the scrollLeft to 0px, and scrollTop to 500px
    // the scroll duration should take 200ms
    this.content.scrollTo(0, 500, 200);
  }

  scrollToTop() {
    // Scrolls to the top, ie 0px to top.
    this.content.scrollToTop();
  }

  scrollToBottom() {
    // Scrolls to the Bottom of the content area.
    this.content.scrollToBottom();
  }

}

The above .ts code contains ViewChild decorator, which is used to get access to the Content component and its methods. By using the local "content" variable, we now call the scrollToTop() method to scroll to the top of the content area or scrollToBottom() method to scroll to the bottom of the content area. We cal also call scrollTo() method to scroll to a particular position, which takes 3 parameters. first one is scrollLeft to, which specifies the position from left & second is scrollTop to, which specifies to which pixels to slide to & third one is duration in milliseconds.