Content.scrollTo() not working with ion-scroll

Ionic Framework ionic-v3
1

Hi,

I face an issue and don’t know how to solve.

The following case works:

(Case 1)

<ion-content padding>
	<button (click)="doTest()">Test</button>
		<p id="testitem">aaaaaaaaaafdsafadfhsdayfsadhfdfohfhsdfhsdfkjhsdhnsfypa;yfdosaiyuofsdahfsdyfasdohfdahfasdoyfsdahfsadyfdhgfsahfsdkajfhdshfaklhfgdaflgagh</p>
</ion-content>

in my class…

@ViewChild(Content) content: Content;

…

constructor(…) {}
…

doTest() {
	let e = document.getElementById("testitem");
	this.content.scrollTo(500, e.offsetTop, 1000)
}

However, when I wrapped the “testitem” with the scrollTo() function is not working.

(Case2)

<ion-content padding>
	<button (click)="doTest()">Test</button>
	<ion-scroll style="height:100px" scrollX="true">
		<p id="testitem">aaaaaaaaaafdsafadfhsdayfsadhfdfohfhsdfhsdfkjhsdhnsfypa;yfdosaiyuofsdahfsdyfasdohfdahfasdoyfsdahfsadyfdhgfsahfsdkajfhdshfaklhfgdaflgagh</p>
	</ion-scroll>
</ion-content>

The reason I added the is to allow user to scroll the long horizontal line.

Anyone can help me to fix so the scrollTo() can work in case 2?

Thanks.

2

scrollTo is not a method of ion-scroll but of Content.
In your case, use scrollToView():

HTML:

<ion-scroll style="height:100px" scrollX="true">
<p id="testitem">aaaaaaaaaafdsafadfhsdayfsadhfdfohfhsdfhsdfkjhsdhnsfypa;yfdosaiyuofsdahfsdyfasdohfdahfasdoyfsdahfsadyfdhgfsahfsdkajfhdshfaklhfgdaflgagh</p>
</ion-scroll>

TS:

doTest() {
let element = document.getElementById(‘testitem’);
element.scrollIntoView()
}

3

Hi fredex, can you explain more how can I use scrollIntoView() to scroll to a particular horizontal position, say for example, scroll 500px of the “testitem” horizontally?

4

I have the same problem with my segement and ion-scroll. could you explain more how to use scrollIntoView() method to scroll to a horizontal position. this is my template.

<ion-scroll scrollX="true" scrollY="false" zoom="false" style="white-space: nowrap; height: 45px; width:100%;" >

<ion-segment (ionChange)="onSegmentChanged($event)" class="segment" style="white-space: nowrap;display: inline-block;width:100%; height:5%;" mode="md" [(ngModel)]="type">



    <ion-segment-button class="segment" value="0" style="white-space: nowrap;display: inline-block;width:25%" >
      Formule
    </ion-segment-button>


    <ion-segment-button value="1" style="white-space: nowrap;display: inline-block;width:25%">
      Tartes
    </ion-segment-button>



    <ion-segment-button value="2" style="white-space: nowrap;display: inline-block;width:35%">
      Sandwiches
    </ion-segment-button>



    <ion-segment-button value="3" style="white-space: nowrap;display: inline-block;width:28%;">
      Boissons
    </ion-segment-button>




  </ion-segment>

</ion-scroll>
1 Like
5

Update
this.content.scrollTo(…)
with
this.content._scrollContent.nativeElement.scrollTo(…)