Content Scroll to point is automaticaly reset to top

Hi,

I’m trying to use an actionsheet to scroll to a point inside a content but every time it is scrolling to the point, the scroll is instantly reset to the top.

Basically, I generate different block with ngfor, then set an ID for each block. I, then, get the element position and use the content scrollToPoint function.

I enabled the scroll event on the ion-content with : <ion-content [scrollEvents]="true" [scrollX]="true" [scrollY]="true">

I enabled anchorscrolling in my app routing module : RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, anchorScrolling: 'enabled' })

<ion-button size="small" (click)="openAC(t)">
       <ion-icon slot="icon-only" class="icon-item-slide" name="list-outline"></ion-icon>
</ion-button>

<div id="{{type.id}}" class="type-event" *ngFor="let type of t.data">
 ....
</div>

@ViewChild(IonContent, {static: false}) content: IonContent;

async openAC(t) {

    let ac_options = {
      buttons: [{
        text: 'cancel',
        icon: '',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    }
    t.data.forEach((type: Type) => {
      ac_options.buttons.push({ 
        text: type.name, 
        role: type.id, 
        icon: '',
        handler: () => {
          var anchor = document.getElementById(type.id).getBoundingClientRect();
          this.content.scrollToPoint(anchor.x, anchor.y);
        }
      })
    })

Any idea ?

Thanks

1 post - 1 participant

Read full topic