CODEWITHSUNDEEP
angulartypescriptionic2ionic3
Richard
Richard

Reputation: 8935

Ionic2 How to scroll a list?

I am using Ionic2.

I have a list of items. On an event (messageSend function called), I would like to scroll to the top of the list.

messages.html

<ion-content padding class="messages-page-content">
    <ion-scroll scrollY="true" class="messages">
  <ion-list class="message-list">
    <ion-item ....

messages.ts

messageSend(va, vi) {
  // scroll to top of list
}

Any advise appreciated.

Update

Here is some sample code:

<ion-header>
  <ion-navbar>
    <ion-title>
       <ion-avatar item-left class='menu-ion-avatar'><img src='{{you.avatar ? you.avatar : you.avatar64 ? you.avatar64 : you.avatarFirebase ? you.avatarFirebase : "images/blank-profile-picture.png"}}'></ion-avatar> 
        <div class='item-avatar-name'>{{you.displayName}}</div>
        <div class="title-timestamp">{{you.lastAccessDate | amDateFormat: 'D MMM YYYY h:mm a'}}</div>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="messages-page-content">
    <ion-scroll scrollY="true" class="messages">
  <ion-list class="message-list" id="message-list">
    <ion-item class="message-item" *ngFor="let item of firelist | async">
        <div [ngClass]="{'message message-me':(item.memberId1 == me.uid)}">
        <div [ngClass]="{'message message-you':(item.memberId1 == you.uid)}">
                    <div class="message-content">{{item.message_text}}</div>
                    <span class="time-tick">
                        <span class="message-timestamp-date">{{item.timestamp | amDateFormat: 'D MMM YY'}}</span>
                        <span class="message-timestamp">{{item.timestamp | amDateFormat: 'h:mm a'}}</span>
                        <div *ngIf="item.memberId1 === me.uid && item.readByReceiver === true">
                            <span class="checkmark">
                                <div class="checkmark_stem"></div>
                                <div class="checkmark_kick"></div>
                            </span>
                        </div>
                    </span>
                </div>
                </div>
        </ion-item>
  </ion-list>
    </ion-scroll>
</ion-content>

<ion-footer>
  <form #f="ngForm">
    <ion-grid>
      <ion-row>
        <ion-col width-90>
          <ion-input [(ngModel)]="message" name="messageText" required placeholder="message..."></ion-input>
        </ion-col>
        <ion-col width-10 center>
          <button (click)="messageSend(f.value, f.valid)" full [disabled]="f.valid === false"><ion-icon class="message-send" name="send"></ion-icon></button>
        </ion-col>
      </ion-row>
    </ion-grid>
  </form>
</ion-footer>

Upvotes: 2

Views: 1974

Answers (1)

sebaferreras
sebaferreras

Reputation: 44659

If the top of the list is also the top of the page, you can use the scrollToTop() method from the content instance like this:

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

@Component({...})
export class MyPage{
  @ViewChild(Content) content: Content;

  scrollToTop() {
    this.content.scrollToTop();
  }
}

If not, you'll need to get the position of the element and use the scrollTo(x,y,duration) method, like this:

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

@Component({...})
export class MyPage {
  @ViewChild(Content) content: Content;

  constructor() {   }

  public scrollElement() {
    let element = document.getElementById('target');
    this.content.scrollTo(0, element.offsetTop, 500);
  }
}

Demo Plunker

Upvotes: 4

Related Questions