Stop scrolling during swipe back

Ionic Framework ionic-v3
1

I would like to prevent scrolling on the active page while swiping back on iOS. My initial thought was to use ionViewWillLeave() and set the overflow to hidden. That works but I cannot hook into the view if the page transition does not complete (the user decides to stay on the current page instead of navigating back). Is there a way to hook into the active when not animating to remove the overflow style applied above? ionViewWillEnter() does not fire when the page never left.

Thanks in advance.

2

I solved my problem invasively and would love a more elegant solution. Iā€™m creating an event listener for the transitionend event and removing overflow: hidden

3

Nice, will you share your workaround?

4

I found a solution. In the Ionic Conference app (Ionic 2 RC4). In the config.xml I copied the last couple things to my Ionic project. And now the swipe back is good.

  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="StatusBarStyle" value="default" />
  <preference name="SplashScreen" value="screen"/>
  <preference name="orientation" value="portrait"/>
  <preference name="SplashMaintainAspectRatio" value="true"/>
  <preference name="FadeSplashScreenDuration" value="300"/>
  <preference name="ShowSplashScreenSpinner" value="false"/>
  <preference name="AutoHideSplashScreen" value="false"/>
  <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
  <preference name="SplashScreenDelay" value="3000"/>
  <feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar"/>
  </feature>
  <feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine"/>
  </feature>
  <plugin name="cordova-plugin-inappbrowser" spec="~1.4.0"/>
  <plugin name="cordova-plugin-wkwebview-engine" spec="https://github.com/driftyco/cordova-plugin-wkwebview-engine.git"/>
  <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
  <plugin name="cordova-plugin-whitelist" spec="1.3.1"/>
  <plugin name="cordova-plugin-console" spec="1.0.5"/>
  <plugin name="cordova-plugin-statusbar" spec="2.2.1"/>
  <plugin name="cordova-plugin-device" spec="1.1.4"/>
  <plugin name="cordova-plugin-crosswalk-webview" spec="~2.2.0">
    <variable name="XWALK_VERSION" value="22+"/>
    <variable name="XWALK_LITEVERSION" value="xwalk_core_library_canary:17+"/>
    <variable name="XWALK_COMMANDLINE" value="--disable-pull-to-refresh-effect"/>
    <variable name="XWALK_MODE" value="embedded"/>
    <variable name="XWALK_MULTIPLEAPK" value="true"/>
  </plugin>
  <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
  <engine name="ios" spec="4.3.1"/>
  <engine name="android" spec="6.1.0"/>
  <icon src="resources/android/icon/drawable-xhdpi-icon.png"/>
1 Like