Capacitor Overscroll Behaviour

Capacitor
1

Hey,
i’m using Capacitor with SvelteKit and TailwindCSS.
My problem is that the bounce-scrolling or overscrolling effect is applied to my header and bottom navigation bar. Here is a small screen recording of this issue: https://www.youtube.com/shorts/gfWTLhV2FpQ

The header and bottom nav have a “position: fixed” property.

Is there a way to disable the stretching on my header and bottom nav? This is my git repo with the full code and configs: GitHub - Fabianofski/Cooking-Cache: The ultimate collection for your recipes!

Please let me know if i can provide additional context.

Thanks!

2

So i kinda managed to fix it.
Setting the overscroll-behavior to none or contain on the body fixes the issue on mobile chrome or firefox. However when building to native the bouncing still happened. So instead of having the scrollbar on the body i moved the scrollbar to a div and added the overscroll-behaviour: contain property there. This is the commit that fixes it: Disabled overscrolling effect completely · Fabianofski/Cooking-Cache@a94d040 · GitHub.
Unfortunately the bounce effect is now disabled completely. I haven’t found a way yet to disable it for the header and bottom nav only.

3

Hi @Fabianofski .

I was trying the same and couldn’t find any good solution.
I’ve open an issue for the Ionic team: feat(ion-tabs): avoid bouncing on overscroll · Issue #30207 · ionic-team/ionic-framework · GitHub

4