How can I use content.scrollTo() for ion-scroll in ionic2?

Question

I try to scroll to a fixed position, for example scrollTo(500, 20). Let\'s say that you are on a device, which has got a width of 300 pixel. The scroll target is now out of

Answer 1

How can I use the scrollTo() method for instead of ?

I'm still working on how to animate the scroll, but at least this may be considered as a solution for your scenario. Please take a look at this plunker.

Since we can't use theion-content for scrolling, I though about getting the instance of the Scroll, then accessing the inner html scroll element, and then using the element.scrollLeft property to scroll on that element:

The element.scrollLeft property gets or sets the number of pixels that an element's content is scrolled to the left.

So in the component code:

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

@Component({...})
export class HomePage {
  @ViewChild('scroll') scroll: any;

    constructor() {}

    public backToStart(): void {
      this.scroll.scrollElement.scrollLeft = 0;
    }

    public scrollToRight(): void {
      this.scroll.scrollElement.scrollLeft = 500;
    }

}

And in the view:

  
        

            

            

            

            

            

            

            

            

            

            

        
    

    Go to start
    Scroll to right!

By doing this.scroll.scrollElement.scrollLeft = 500;, we can scroll the content of the ion-scroll 500px to the right. We can then go back to the start again by doing this.scroll.scrollElement.scrollLeft = 0;.