How to stop contents under a select popup scrolling on ios

Ionic Framework ionic-v3
1

I have an Ionic 2 application built with the following setup…

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.1
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1 Build version 8C1002

When I open a select popup on top of a page, and try to scroll, it scrolls the content of the main page rather than the select contents. This only happens on ios, it is fine on Android.

Does anyone have any ideas how to fix this?

Thanks in advance!

2

On further investigation, if the select popup has content, it does scroll this instead of the content page.

It is when the dialog does not need to scroll, it will scroll the content underneath. Perhaps this is noticed on ios as it has the view “elastic scroll” which is not present on Android (and I also want to get rid of - will do a separate post for that)

3

The best fix I found here, ie just add

 <ion-content no-bounce>
4

I have found a way to achieve it on ionic 3 - platform ios.

Context: When a select popup opens up, a class disable-scroll is added on ion-app tag. We utilize this class to accomplish our aim, by adding a CSS code in our app.scss file.

Code: Please add the following code to you project’s app.scss file:

.disable-scroll ion-content > .scroll-content {
    overflow-y: hidden !important;
}

And you are done! Hope this helps. Happy coding!!