Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Ionic2 - programmatically scroll an ion-scroll

I'm having a page with 2 scrollable views next to each other:

<ion-content>
   <ion-scroll></ion-scroll>
   <ion-scroll></ion-scroll>
</ion-content>

I want to programmatically scroll the first one, but it seems the scrollTo is only a method on ion-content (which I ofcourse can not scroll, I need to have the second one independant)

Is there any way to solve this?

update: added a plnkr to show what I need

like image 992
S. Roose Avatar asked Apr 01 '17 17:04

S. Roose


1 Answers

If I am not mistaken you are trying to Scroll the Left Scroller and I see you have a view selector called leftCats.

So if you just change one line you will be able to scroll. Here is my code below:

NOTE: This is just plain javascript. It jumps to the scroll position. You can apply animation if you like later.

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

@Component({
  templateUrl:"home.html"
})
export class HomePage implements AfterViewChecked {

  @ViewChild('content') content;
  @ViewChild('leftCats') leftItems;

  constructor() {

    }

    scroll() {
      //I want to scroll the left pane here
      console.log('scroll');

      this.leftItems.scrollElement.scrollTop += 50; // Change This Line
    }

}

I have also forked it here: DEMO

Hope it helps.

like image 198
TipuZaynSultan Avatar answered Oct 13 '22 10:10

TipuZaynSultan