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 the screen scope, you have to scroll to the right.

I solved this by doing the following:

<ion-content>
    <ion-scroll scrollX="true" style="width:100%; height:100%; white-space: nowrap; ">
        <div style="width:1000px; ">
            [box1] [box2] [box3] [...]
        </div>
    </ion-scroll>
</ion-content>

Up to here everything is fine. The problem starts if i want to jump 500 pixel to the right by pressing a button for example. Swiping to the right works. I know that there is a function to do this for <ion-content>:

@ViewChild(Content) content: Content;
[...]
this.content.scrollTo(500, 500, 500); 

This unfortunately doesn't work in my case. I think the problem is that the content is related to the device size so the scrollTo() method does not take affect for <ion-scoll>. How can I use the scrollTo() method for <ion-scroll> instead of <ion-content>?

Thanks for any help!

Answer 1

How can I use the scrollTo() method for <ion-scroll> instead of <ion-content>?

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:

<ion-content padding>
  <ion-scroll #scroll scrollX="true" style="width:100%; height:150px; white-space: nowrap;">
        <div  style="width:1000px;">
            <div style="display:inline-block;height:100px;width:100px;border:1px solid black;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid red;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid blue;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid green;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid grey;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid brown;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid yellow;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid orange;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid pink;"></div>
            <div style="display:inline-block;height:100px;width:100px;border:1px solid violet;"></div>
        </div>
    </ion-scroll>

    <button (click)="backToStart()" ion-button text-only>Go to start</button>
    <button (click)="scrollToRight()" ion-button text-only>Scroll to right!</button>
</ion-content>

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;.

Answer 2

By content scrolling

@ViewChild(Content) content: Content;
  this.content.scrollTo 

By id #scroll

@ViewChild('scroll') scroll: any;  
this.scroll.scrollElement.scrollLeft = 500;

This above method is working fine for top bottom scrolling but in the case of horizontal/scrollX not working so by below code i resolve my solution may hope it will helpful for you.

TypeScript

scrollmain(elementId, index) {
   console.info('elementId', elementId)
   var el = document.getElementById(elementId);
   el.scrollIntoView({ behavior: "smooth" });
}

HTML

<ion-scroll #scroll scrollX="true" style="width:100%;white-space: 
          nowrap; height: 60px">
    <ion-segment *ngIf="mcqdata" color="appmaincolor">
        <ion-segment-button *ngFor="let mcq of mcqdata; let i=index;" [id]="mcq.ques_id" value="{{mcq.ques_id}}" (ionSelect)="scrollmain(mcq.ques_id,i)"
            [ngClass]="{'active': selectedIdx == i}">
            <strong>Queastion{{i+1}}</strong>
        </ion-segment-button>
    </ion-segment>
</ion-scroll>

Answer 3

To add to the answers above, this will handle smooth scrolling.

Name the scroll element in your .html

<ion-scroll #scroll>

Import the scroll.

import { Scroll } from 'ionic-angular';

Reference the scroller in the .ts

@ViewChild('scroll') scroll: any;

Add this code where its needed:

this.scroll._scrollContent.nativeElement.scrollTo({ left: 0, top: 0, behavior: 'smooth' });

Hope that helps somebody.