CODEWITHSUNDEEP
telegramtelegram-bot
Mack Doe
Mack Doe

Reputation: 11

When the running the TG mini app, I have scrolling issue

I'm currently building Telegram mini app and it is running well. But I have some issue as below: There is no problem when running it on the web, but there is a scrolling problem when running it in an app. you can check the following capture.

When running it on the Iphone https://github.com/user-attachments/assets/6f7196c5-5947-40bf-92a1-fbbfeec5a39c

When running it on the android https://github.com/user-attachments/assets/b11bf5d9-1bf5-4654-beca-d71acc827317

Upvotes: 1

Views: 285

Answers (1)

Алексей
Алексей

Reputation: 11

I also struggled with this problem for a long time, but the other day I was able to solve it using css. You need to set the following styles for the containers of the page that telegram sends:

html.root {
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
  overscroll-behavior: none;
}

body.root,
div.root {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0px;
  overflow: hidden;
  overscroll-behavior: none;
}

div.content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px;
  box-sizing: border-box;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

The key here is the overflow: hidden style for html.root, body.root and div.root. It is he who disables scrolling in higher-level containers.

div.content-container is already my top container that I create to connect my layout. In it I enable overflow: auto and thus scrolling in the application works, but there is no this killing bug. Experiment with other styles at your discretion.

Upvotes: 1

Related Questions