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

user_462071 0
Viewed 14861

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!

ionic2 ionic3 ionic-framework angular typescript
5 Answers

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>
user_68403870

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.

user_14188980

You can replace this.content.scrollTo(...) with this.content._scrollContent.nativeElement.scrollTo(...)

user_84618810
Related