feat: Android 12 - Deactivate Stretch/Bounce effect scroll

[NeluQi]

How can I disable page stretching on over scroll in android?

my project on vue3

https://9to5google.com/2021/05/26/google-chrome-android-12-stretchy-scrolling/#:~:text=Android%2012%20and%20higher%20have,flag%20in%20chrome%3A%2F%2Fflags.

[lmfmaier]

Same issue here. Setting "overscroll-behavior-y: none" in css does not help

[l5chaill]

In the layout, setting :

android:overScrollMode="never"

doesn't work either...

[OffTheRip0]

Hi have you found a fix yet?? I haven't yet so I took it upon myself to try and create an Xposed module to help out with this, first I'll try disabling this effect then I'll try to implement the iOS over scroll which I'm a huge fan of even tho I'd consider myself an Android enthusiast

I have no experience in making Xposed modules but I will try this out with the help of a friend

[NeluQi]

thatweedie, I didn't find a solution It is very necessary, I wish you good luck! Describe here how the results will be, please

[buschtoens]

I have found WebView#setOverScrollMode(int mode) to be working fine:

class MainActivity : BridgeActivity() {
    // ...

    /**
     * Called during initialization of the application.
     */
    public override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Disable the rubber-band over-scroll effect.
        // The `WebView` stretching does not take `position: fixed` elements into account, which
        // causes the app UI to get stretched.
        // https://github.com/ionic-team/capacitor/issues/5384#issuecomment-1165811208
        bridge.webView.overScrollMode = OVER_SCROLL_NEVER
    }
}

Before	After
https://user-images.githubusercontent.com/834636/175665314-c9b3d6dd-36a1-44d8-bccc-0581de47f677.mp4	https://user-images.githubusercontent.com/834636/175665288-2d91beb3-5316-4cf2-8057-08110a9f3bd5.mp4

[lmfmaier]

I have found WebView#setOverScrollMode(int mode) to be working fine:

class MainActivity : BridgeActivity() {
    // ...

    /**
     * Called during initialization of the application.
     */
    public override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Disable the rubber-band over-scroll effect.
        // The `WebView` stretching does not take `position: fixed` elements into account, which
        // causes the app UI to get stretched.
        // https://github.com/ionic-team/capacitor/issues/5384#issuecomment-1165811208
        bridge.webView.overScrollMode = OVER_SCROLL_NEVER
    }
}

Before After before.mp4 after.mp4

Thank you!

[lmfmaier]

Here's my working implementation in Java. Note that getBridge() returns null in the onCreate() method in Capacitor 3, but works in onStart()

import android.os.Bundle;
import android.webkit.WebView;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
  }

  @Override
  public void onStart() {
    super.onStart();
    // Disable the rubber-band over-scroll effect that causes the app UI to get stretched.
    WebView v = getBridge().getWebView();
    v.setOverScrollMode(v.OVER_SCROLL_NEVER);
  }
}

[Jal3223]

Here's my working implementation in Java. Note that getBridge() returns null in the onCreate() method in Capacitor 3, but works in onStart()

import android.os.Bundle;
import android.webkit.WebView;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
  }

  @Override
  public void onStart() {
    super.onStart();
    // Disable the rubber-band over-scroll effect that causes the app UI to get stretched.
    WebView v = getBridge().getWebView();
    v.setOverScrollMode(v.OVER_SCROLL_NEVER);
  }
}

Any chance of making this an Xposed module. I would be happy to pay someone.

[user080975]

This method doesn't seem to work in Capacitor 4 anymore. Is there anyway to disable the bounce scroll in Android in Capacitor 4?

[lmfmaier]

This method doesn't seem to work in Capacitor 4 anymore. Is there anyway to disable the bounce scroll in Android in Capacitor 4?

Still works like a charm in Capacitor 4 for me

[user080975]

I'm quite new to Capacitor on Android and if it works for you, I think that must mean I edited the wrong file. Can you please tell me which file did you make the change on and I'll try again. Thank You!

[lmfmaier]

I'm quite new to Capacitor on Android and if it works for you, I think that must mean I edited the wrong file. Can you please tell me which file did you make the change on and I'll try again. Thank You!

Navigate to your capacitor project folder, then it's

android/app/src/main/com/yourdomain/yourapp/MainActivity.java

Directory structure after main depends on your appId

[user080975]

Thank you! Now it's working great! :)

[KHJcode]

This is my code at capacitor version 4 using java.

package com.example.app;

import android.os.Bundle;
import android.webkit.WebView;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public void onStart() {
        super.onStart();
        WebView webview = getBridge().getWebView();
        webview.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
    }
}

[anton-gustafsson]

Thanks for opening this issue!

Great solutions, I used @KHJcode snippet in a capacitor 4 app.

[manprit-tiwari]

This is my code at capacitor version 4 using java.

package com.example.app;

import android.os.Bundle;
import android.webkit.WebView;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public void onStart() {
        super.onStart();
        WebView webview = getBridge().getWebView();
        webview.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
    }
}

Works great on Capacitor v5 also. Thanks!

[BobH-Official]

This is my code at capacitor version 4 using java.

package com.example.app;

import android.os.Bundle;
import android.webkit.WebView;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public void onStart() {
        super.onStart();
        WebView webview = getBridge().getWebView();
        webview.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
    }
}

Works with Capacitor v6-beta also. Thanks! Really hope this can be a default feature for Capacitor as it makes the app looks more native.

[buschtoens]

I'm sure a PR adding this option to the android section of the capacitor.config.json would be appreciated.

[GimpMaster]

I'm sure a PR adding this option to the android section of the capacitor.config.json would be appreciated.

That would be amazing. Any one up to the task?

Also still working in Capacitor v 6.0

[felixSchl]

Is there any way to simulate the overscroll effect inside the webview after disabling it outside the webview so that only tab contents stretch, for example?

[MrAnyoneGuy]

Hi @buschtoens could you tell me with a video/screenshot how to use/insert this script within Android. Does this script work for Android versions 13, 14 and 15? Does it work for the entire operating system or only for "webview". Greetings