CODEWITHSUNDEEP
angularionic2
user8944783
user8944783

Reputation:

how to scroll the page to bottom whenever the page load?

Requirement- I want to scroll the content to the bottom of the page whenever the page load.

Here is my html code

<ion-content  style="background-color: #f5f8fa;">
  <p style="line-height:24px;padding-left:10px;margin-top:20px;text-transform:capitalize;font-size:16px;">{{this.TASKDESC}}</p>
 <ion-list *ngFor="let list of list; let i = index;" style="margin:0;height:auto;padding-top:5px;padding-left:17px;z-index:-1">


    <ion-item text-wrap class="item" style=" margin-top:-25px;padding:0; background-color:#f5f8fa;z-index:-1;">
      <div [style.margin]="list.TAG_FROM === loggedinuser ? '0px 0px 0px -12px':'0px -12px 0px 0px'" [style.float]="list.TAG_FROM === loggedinuser ? 'right':'left'" style="width:33px;height:33px;background-color:#818993;overflow:hidden;color:#fff;z-index:9.9999999;border-radius:50%;font-size:14px;text-align:center;padding-top:7px;" >{{list.TAG_FROM.substring(0,2)}}</div>
      </div>
    </ion-item>
  </ion-list>
</ion-content>

Current position of the page

enter image description here

What i want- The image of the page

enter image description here

Scroll to bottom automatically whenever the page load.

Upvotes: 2

Views: 4262

Answers (4)

RafaelJan
RafaelJan

Reputation: 3608

I tried to find a solution for this a long time. All these solutions are not good enough since it start with the top of the page and jump to the end. I want it to be load directly to the end. I just find the answer here

<ion-content>
  <ion-list>
    <ion-item *ngFor="let item of items; let last = last">
      {{item}}
      {{last ? callFunction() : ''}}
    </ion-item>
  </ion-list>
</ion-content>

and from here this is for ts file:

export class Page2 {
  public items: any[] = [];
  @ViewChild(Content) content: Content
  constructor(
    public navCtrl: NavController,
    public navParams: NavParams) {
    setTimeout(() => {
      for (let i = 0; i < 100; i++) {
        this.items[i] = i
      }
    }, 300)
  }
  callFunction(){
    this.content.scrollToBottom(0)
  }
}

go the the link to see more on that

Upvotes: 0

99tharun
99tharun

Reputation: 1216

The simplest method is to set the scrollDownOnLoad property to true on the ion-content.

<ion-content scrollDownOnLoad="true">

</ion-content>

Find the official documentation here

Upvotes: 4

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41407

use the #content identifier to obtain a reference to <ion-content> using the ViewChild.

<ion-content #content style="background-color: #f5f8fa;">
  <p style="line-height:24px;padding-left:10px;margin-top:20px;text-transform:capitalize;font-size:16px;">{{this.TASKDESC}}</p>
 <ion-list *ngFor="let list of list; let i = index;" style="margin:0;height:auto;padding-top:5px;padding-left:17px;z-index:-1">


    <ion-item text-wrap class="item" style=" margin-top:-25px;padding:0; background-color:#f5f8fa;z-index:-1;">
      <div [style.margin]="list.TAG_FROM === loggedinuser ? '0px 0px 0px -12px':'0px -12px 0px 0px'" [style.float]="list.TAG_FROM === loggedinuser ? 'right':'left'" style="width:33px;height:33px;background-color:#818993;overflow:hidden;color:#fff;z-index:9.9999999;border-radius:50%;font-size:14px;text-align:center;padding-top:7px;" >{{list.TAG_FROM.substring(0,2)}}</div>
      </div>
    </ion-item>
  </ion-list>
</ion-content>

Now use the this.content.scrollToBottom to scroll bottom.

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

@Component({
  templateUrl: 'chatPage.html'
})
export class ChatPage {
  @ViewChild('content') content:any;

  constructor() { }

  ionViewDidEnter(){
    this.content.scrollToBottom(300);
  }
}

Upvotes: 3

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

try this below code 

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

...

export class ScrollToBottom {

  @ViewChild(Content) content: Content;

  constructor(){}

  ionViewDidLoad()
  {
     setTimeout(() => {
        this.content.scrollToBottom(300);
     }, 1000);
  }

}

Upvotes: 2

Related Questions