Geek Answers Handbook

How to scroll an item when viewing

We are looking for something similar to scrollIntoView() in Ionic2 to use when I click a button, for example.

None of the methods described in ion-content help.

+10
source share
6 answers

Please look at this working piston.

You can use the scrollTo(x,y,duration) (docs) method. The code is quite simple: first we get the position of the target element (in this case a <p></p> ), and then use it in scrollTo(...) . First opinion:

 <ion-header> <ion-navbar primary> <ion-title> <span>My App</span> </ion-title> </ion-navbar> </ion-header> <ion-content> <button ion-button text-only (click)="scrollElement()">Click me</button> <div style="height: 600px;"></div> <!-- Notice the #target in the p element --> <p #target>Secret message!</p> <div style="height: 600px;"></div> </ion-content>

And component code:

 import { ViewChild, Component } from '@angular/core'; import { NavController, Content } from 'ionic-angular'; @Component({ templateUrl:"home.html" }) export class HomePage { @ViewChild(Content) content: Content; @ViewChild('target') target: any; constructor() { } public scrollElement() { // Avoid reading the DOM directly, by using ViewChild and the target reference this.content.scrollTo(0, this.target.nativeElement.offsetTop, 500); } }
+12
source

I would use the anker link in HTML.

Just enter elemnt and id = "scrollXYZ" and wrap the button in

Example:

 <a href="#scrollXYZ"><button>Example</button></a> <div id="scrollXYZ"><h2>Scroll to this</h2></div>
+1
source

I noticed that the above solution does not work well with Angular universal server rendering (SSR) due to the lack of document on the server side.

Therefore, I wrote a convenient plugin to achieve scrolling to elements in Angular 4+ that work with AoT and SSR

NPM
ngx-scroll-to

Github
ngx-scroll-to

+1
source

I tried to do this in Ionic 3, and because <Element>.offsetTop returned 10 (padding at the top of the element) instead of the distance to the top of the page (a much larger unknown number), I ended up just using <Element>.scrollIntoView() , which worked well for me.

To get the <Element> object, I used document.getElementById() , but there are many other options for how to get a handle to this.

+1
source

In Ionic 4 , the scroll function is renamed to scrollToPoint() .

Screenshot from Ionic docs

0
source

The ion content should have scrolling methods for individual children, no matter how deep they are. Current methods are fine, but one of the goals of the ionic approach is to make time-consuming, boring code like document.getElementById obsolete.

Methods also have no control over scroll animations.

Therefore, currently the best option is the scrollIntoView method. Attach the identifier to the element you want to jump to, then use getElementbyID to call scrollIntoView. So:

.html

 ... <ion-row id="myElement"> ... </ion-row>

c

 ... scrollToMyElement() { document.getElementById('myElement').scrollIntoView({ behavior: 'smooth', block: 'center' }); }

Then call the method for some DOM event or button click. If your item is conditional, this most likely will not work. Instead, use a conditional hidden attribute, or if you need to use ngIf , set the logic so that the element is inserted first.

I tried this with various other components of the ion interface (4) and it works great.

0
source

More articles:


All Articles