scrollTo functionality with virtualScroll list

Ionic Framework ionic-v3
1

Hi everybody,

I make an event app (https://github.com/saloonapp/saloon-app, just like ionic conference app) and I want to allow users to scroll to current time in event.
So, I’m looking to implement a scrollTo functionality on a list using virtualScroll…
The problem is that there is no DOM element to scroll to (which is the purpose of virtualScroll…).

Does anybody did that ?

I posted that as feature request but it were closed as they classed it in support : https://github.com/driftyco/ionic/issues/6431 :frowning:

2

Hi, Did you solve the issue? :S
Any help?

3

+1 Bump.

Have you found any solution on this? I have been trying to do a similar thing. I am trying to do scrolltobottom(). It works with normal *ngFor, but when I converted to virtual scroll, it then scrolls somewhere in the middle of the list.

4

When the items of your virtualScroll list are of equal height, you could write:

@ViewChild(Content) content: Content;
itemHeight = 72; //adapt to your items height!

scrollToItem(itemNo: number) {
    this.content.scrollTo(0, (itemNo-1) * this.itemHeight, 0);
}

Reference: docs

2 Likes
5

Hello loicknuchel, Did you solve the issue? I have a same problem, I need scroll to specific item in the list but de problem is that there is no DOM element exist.

6

Hello ionic community,

I also wanted to do something similar… I want to scroll the list using a button, using scrollTo().

The problem i got here is…
A) scrollTo(), only works when i put duration to 0.
E.g. this.content.scrollTo(0, 400, 0); <–this works.
E.g. this.content.scrollTo(0, 400, 300); <–this does not work.

B) When I use this.content.scrollTo(0, 2000, 0); to reach end of the list, VirtualScroll will not display the buffer list. I need to scroll up and down manually, then the list will come out.

Anyone have work around for this?

7

Hi any news on this ? I migrated from an *ngFor ion-list to a [virtualscroll] one, but the scrollTo method does not work anymore (it worked with the non virtualscroll list). The list is a chat view, and scrolling to bottom as soon as entering the page is vital… didn’t find any way to scroll to bottom, tried several methods (with dimensions, etc…), but none worked

the list is:

<ion-list [virtualScroll]=“backend.chatmessages” [approxItemHeight]="‘100px’"> 

  <ion-item *virtualItem="let item" (press)="shareItem(item)" class="message"  [ngClass]="(item.nickname===me.nickname) ? 'message me': (item.color=='yellow') ? 'message system' : 'message'">
   
      <div class="msgemail">{{item.nickname}}    <span class="date">{{ getNormalDate(item.time) }}</span></div>

and the methods i call are:


scrollToBottom(){
  var that = this;

    if (that.content) {
    
      that.content.scrollTo(0, 400, 0)    
    }
}

Please someone ? Thanks in advance