Scroll to specific element

Ionic Framework ionic-v3
7

I have been binding id properties of JSON obects that I am dynamically displaying via *ngFor to their respective HTML element ids, e.g:

<p *ngFor="let jsonObj of myObjects" [id]="jsonObj.id">

In my page component, I have a method that takes the same id as an argument and gets the offsetTop property of the dom element with this id, which I then use as the y value to scroll to:

  scrollTo(element:string) {
    let yOffset = document.getElementById(element).offsetTop;
    this.content.scrollTo(0, yOffset, 4000)
  }

Currently, this does a nice scroll to the element, although I’m not sure how reliable the offsetTop property will be with more complex layouts. For your need, I think you would first call content.resize() to update the layout, and then use the element id of the target accordion element to get the offsetTop value to scroll to. All pure conjecture of course. :wink:

16 Likes