Ion-scroll and fixed elements inside


#1

HI! I have this template for a component.

I have to fix the first row and the first column.
The application is a planning and I have to keep still the first column that is composed of the rooms and the first row that are the days.

I can not just lock the position because the first column can scroll vertically and the first row horizontally.

Any help?

<ion-scroll #calendar id="calendar" scrollX="true" scrollY="true" class="item" (ionScroll)="scrollHandler($event)">
    <div class="calendarComponent">
        <ion-row class="calendarDaysRow" nowrap>
            <ion-col class = "day" *ngFor="let day of calendarDays">
                {{day.toDateString().split(" ")[0] + " " + day.toDateString().split(" ")[1] + " " + day.toDateString().split(" ")[2]}}
            </ion-col>
        </ion-row>
            
        <ion-row  class="calendarRow" *ngFor="let room of roomsList" nowrap>
            <ion-col class="room">{{room.getName()}}</ion-col>
            <ion-col class="dayInfo" *ngFor="let day of calendarDays" >
                <calendarPageComponentElement [room]="room" [day]="day" [reservations]="getRoomDayReservation(day,room)"></calendarPageComponentElement>
            </ion-col>
        </ion-row>
    </div>
</ion-scroll>```

#2

Hey, did you fix this? I have similar problem. I have to make festival timetable, where some rows should stay fixed and some should scroll horizontally(but all of them should scroll vertically). I can not make some rows to not scroll with the rest of ion-scroll content.