CODEWITHSUNDEEP
angularjsangularionic-frameworkionic2
S. Roose
S. Roose

Reputation: 1677

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

Upvotes: 8

Views: 2631

Answers (1)

TipuZaynSultan
TipuZaynSultan

Reputation: 783

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.

Upvotes: 2

Related Questions