Scrolling issue causes Telegram Bot Web App to collapse on Android

Other Questions Telegram bot
1

Hey everyone, I’m having a weird problem with my Flutter web app inside Telegram. It works fine on iOS, but on Android, it’s acting up.

When I scroll down, the whole app just collapses like it’s a bottom sheet or something. It’s super annoying!

I fixed it for iOS by adding some JavaScript to stop the default touchmove behavior. Here’s what I used:

document.addEventListener('touchmove', (e) => {
  e.preventDefault();
}, { passive: false });

But on Android, nothing seems to work. I’ve tried messing with touchmove, overflow, and even relative positioning. No luck so far.

Has anyone run into this before? Any ideas on how to stop the app from collapsing when scrolling on Android? I’m totally stuck here. Thanks for any help!

2

yo, i had the same issue on my bot. try adding this to ur css:

body {
overscroll-behavior-y: contain;
position: fixed;
width: 100%;
}

it fixed it for me on android. lemme know if it helps!

3

Have you considered using a custom ScrollView widget in Flutter? I encountered a similar issue and found that implementing a custom scroll behavior can help mitigate the collapsing problem on Android.

Try wrapping your main content in a CustomScrollView with a SliverFillRemaining child. This approach maintains the scroll position and prevents the app from collapsing unexpectedly. Here’s a basic example:

CustomScrollView(
  physics: ClampingScrollPhysics(),
  slivers: [
    SliverFillRemaining(
      hasScrollBody: false,
      child: YourMainContent(),
    ),
  ],
)

The ClampingScrollPhysics() ensures the scroll doesn’t overshoot at the edges. This solution worked well for me across different Android devices. Let me know if you need more details on implementation.

4

I’ve dealt with similar scrolling issues in Telegram Bot Web Apps before. One solution that worked for me was using a combination of CSS and JavaScript to handle the scrolling behavior.

Try adding this CSS to your app:

html, body {
  height: 100%;
  overflow: hidden;
}

#app-container {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

Then in your JavaScript, you can use:

document.getElementById('app-container').addEventListener('scroll', (e) => {
  if (e.target.scrollTop === 0) {
    e.target.scrollTop = 1;
  } else if (e.target.scrollHeight === e.target.scrollTop + e.target.offsetHeight) {
    e.target.scrollTop -= 1;
  }
});

This approach prevents the default browser behavior while still allowing smooth scrolling within your app. It’s worked well for me across both Android and iOS devices. Hope this helps!