Scrolling of expanded accordion to the top [ionic6]

Ionic Framework Ionic Angular
1

We have an accordion group that is filled dynamically with ngfor. We need to expand and scroll every accordion item to the top upon clicking on it so that the title stay visible. Unfortunately the accordion items have different heights.
We found this on stackoverflow:

but to make it work we should remove [fullscreen]=“true” and that is unfortunately not possible.
Can someone give a hint about how should it be done or a link to working example? Is the only possibility to give ID to every accordion item and calculate y position and then use scrollToPoint?

2

Can you put together a quick demo of what you have? doesn’t need to be your exact app, but just something we can work with to help find an answer?

3

We’ve tried with a scrollToPoint but it doesn’t work properly.

news.page.html the page where the scrolling should take place. The items of the accordion that should be scrolled into view coming from component news-accordion-group

<app-header [online]="online"></app-header>

<ion-content [fullscreen]="true">

  <app-no-internet [hidden]="online || dataIsLoaded"></app-no-internet>

  <div [hidden]="!dataIsLoaded">
    <div *ngIf="(carDealer$ | async) as carDealer">
      <app-top-news-slider [topNews]="{status: 'success', news: carDealer.topNews}"></app-top-news-slider>
      <app-news-accordion-group [carDealer]="carDealer" (scrollEvent)="scrollTo($event)"></app-news-accordion-group>
    </div>
  </div>
</ion-content>

<app-footer></app-footer>

news.page.ts (here at the end we’ve tried to define scroll function

import {ChangeDetectorRef, Component, ElementRef, NgZone, OnInit, QueryList, ViewChild} from '@angular/core';
import {ApiService} from '@services/api.service';
import {CarDealer} from '@models/car-dealer';
import {Observable, Subscription} from 'rxjs';
import {UserService} from '@services/user.service';
import {InternetService} from '@services/internet.service';
import {IonContent} from '@ionic/angular';

... some code here ...

    /**
     * We should scroll to the content we need sliderHeight to know where we should stop
     *
     * @param y offset according to the accrdionElement (e.g. second Accordion y is +40px) see news-accordion-group
     */
    scrollTo(y){
        this.myContent.scrollToPoint(0,y,0);
    }
}

news-accordion-group.component.html The accordion here is coming from another component: news-preview-accordion

<ion-accordion-group class="ion-margin-vertical"  id="accordionGroup">
  <app-news-preview-accordion
    [logo]="carDealer.logo"
    color="var(--ion-color-dark)"
    [name]="carDealer.shortName" [news]="carDealer.news"
    (click)="scrollTo(0)"
    [link]="linkCarDealer + carDealer.id">
  </app-news-preview-accordion>


  <app-news-preview-accordion
    *ngFor="let brand of carDealer.brands; let i = index;"
    [logo]="brand.logo"
    [color]="brand.color"
    [name]="brand.name"
    (click)="scrollTo(40 + i*50)"
    [news]="brand.news" [link]="linkBrand + brand.id">
  </app-news-preview-accordion>

  <app-news-preview-accordion
    [logo]="avagLogo"
    color="var(--ion-color-dark)"
    name="AVAG"
    [news]="carDealer.publicNews"
    (click)="scrollTo(100)"
    [link]="linkPublic">
  </app-news-preview-accordion>

</ion-accordion-group>

news-accordion-group.component.ts We’ve tried to add an offset to the scrollTo function to calculate it dynamically and get proper scrolling but something is wrong and it doesn’T work as inteded

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {CarDealer} from '@models/car-dealer';
import {NewsType} from '@models/news-type';
import {environment} from '@environments/environment';


... some irrelevant code here..

    /**
     * Get the offset of the accordionGroup and call the scroll function on parent
     * @param offset additional offset
     */
    scrollTo(offset: number): void {
        const accordionGroupElement = document.getElementById('accordionGroup');
        this.scrollEvent.next(accordionGroupElement.offsetTop + offset);
        console.log(accordionGroupElement.offsetTop, offset);
    }
}

news-preview-accordion.component.html where the actual accordion and its items are generated

<ion-accordion>
  <ion-item slot="header" class="ion-no-margin ion-no-padding">
    <ion-thumbnail class="ion-no-margin small-padding logo-thumbnail" [ngStyle]="{'border-right': '10px solid ' + color}">
      <ion-img [src]="logo || avagLogoSrc"
      (ionError)="logo = avagLogoSrc" class="logo"></ion-img>
    </ion-thumbnail>
    <h3 class="ion-padding-start font-weight-bolder ion-text-uppercase">{{name}}</h3>
  </ion-item>

  <div slot="content">
    <div *ngFor="let article of news; index as i" [ngSwitch]="i">
      <ng-template ngSwitchCase="0">
        <div class="border-bottom ion-padding-bottom"  (click)="navigateTo(article.id)">
          <ion-img [src]="article.image || defaultImageSrc"
                   (ionError)="article.image = defaultImageSrc"></ion-img>
          <div class="ion-margin-horizontal">
            <h4 class="font-weight-bold ion-text-uppercase">{{article.title}}</h4>
            <p class="font-size-small">{{'labelPublished' | translate}} {{article.published}}</p>
            <p>{{article.introtext}}</p>
          </div>
        </div>
      </ng-template>
      <ng-template ngSwitchDefault>
        <app-news-list-item [article]="article"></app-news-list-item>
      </ng-template>
    </div>
    <app-load-all-news-button [name]="name" [link]="link"></app-load-all-news-button>
  </div>
</ion-accordion>

Thanks a lot for your desire to help. I hope it is someway clear what we have and what we have tried to do about the scrolling. I am not sure we can make this approach with absolute numbers and scrollToPoint to work correctly in general, because of the fact that we have <ion-content [fullscreen]=“true”> and it means scrolling only on the accordion will always place it at top and cut the name (heading) of the accordion item with the nav toolbar cause of negative offset in x for fullscreen version. Unfortunately we can’t remove fullscreen thing, so we need that the accordion item will be scrolled to the top and it’s name should stay visible. And now I am not sure what would be best way to make scroll event not on the accordion but on the page and calculate position of every accordion item somehow and scroll to it the same way how we’ve tried to scroll it on accordion. Or there is some other better way to do all the scrolling.