I have an application where I use an ion-scroll to scroll the main contents rather than having the ion-contents scroll. I do this as I want a fixed filter at the top of the page.
I have markup like below…
.mm-card-page-content {
height: 100%;
display: flex;
flex-direction: column;
background-color:white;
}
.mm-card-inner-scroll {
flex-grow: 2
}
<ion-content scroll='false' no-bounce>
<div class='mm-card-page-content'>
<ion-grid >
<ion-row class='mm-search-row'>
<ion-col class='mm-card-searchbar-col'>
<ion-searchbar placeholder="{{'LABEL_SEARCH' | translate}}"
class='mm-card-search-bar' [(ngModel)]="searchText" (ionInput)="filterItems($event)"></ion-searchbar>
</ion-col>
<ion-col class='mm-filter-col'>
<ion-option ion-button (click)='filterClick()'>
<ion-icon md='ios-funnel' name='funnel'></ion-icon>
</ion-option>
</ion-col>
</ion-row>
</ion-grid>
<ion-scroll class='mm-card-inner-scroll' scrollX="false" scrollY="true">
<div *ngFor="let item of filteredData" class='mm-card-outter' >
<!-- contents -->
</div>
</ion-scroll>
</div>
</ion-content>
To stop the main content scroll I have the ion-content scroll='false' no-bounce, and I have the ion-scroll with scrollY="true" to scroll the main contents.
I use the filter button to show an alert…
let alert = this.alertCtrl.create({enableBackdropDismiss: false});
.. add options...
alert.present();
This work fine in the browser and on Android, but on ios, I can scroll the contents of the ion-scroll. Also if the alert does not have scrollable contents, then if I try to scroll (swipe my finger up and down) on the alert, then the ion-scroll under it does the scrolling.
My only work around at the moment is to set a variable when the alert if presented and bind to the scrollY ie
<ion-scroll [scrollY]="!filterOpen"
but you can see the ion-content jump slightly when you do this.
Has anyone else had this problem, and know of any fix?
Thanks in advance for any help!