**Update:** After the recent update to Telegram in version BOT API 7.7, the methods `enableVerticalSwipes` and `disableVerticalSwipes` should be used instead for solving this issue, making the below workarounds unnecessary. https://core.telegram.org/bots/webapps#july-7-2024 **Note:** I was supposed to update this article with a new method due to some bugs it had, but unfortunately, I haven't had the time yet. However, based on some existing trend mini-apps, I devised a better trick to prevent the mini-app from closing and control this issue. a sample web app that uses this new trick for fixing this issue is available to check out here: ([Demo Mini App](https://t.me/webapp_theme_inspector_bot/dev)). Also, I have provided the code snippets for this mini app in this [Github gist](https://gist.github.com/nimaxin/758c83f66c0084e66074c19c5e1fdd13). _The logic and explanations in this article remain valid and applicable._ ### Introduction Telegram Mini Apps empower developers to create dynamic interfaces using JavaScript directly within the platform. However, on touchscreen devices, users frequently encounter **unexpected collapses or scrolling issues** while interacting with these Mini Apps, significantly impacting the overall user experience. ### Visual Comparsion: Before diving into discussing why it's happening and the solution for it, let's visually observe the problem. | ![Swiping inside the Telegram Mini App causes it to collapse instead of scrolling](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlr9e3cja1x7fx09yo62.gif) | ![Swiping inside the Telegram Mini App now correctly scrolls through the content after the issue is fixed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmst9am7jh4urzhu9pt1.gif) | |:-------------------------------------------:|:-------------------------------------------:| | **Bug:** Swiping down the Telegram Mini App causes it to collapse instead of scrolling |**Fixed:** Swiping down the Telegram Mini App now correctly scrolls through the content after the issue is fixed!| ### Why It Happens The scrolling collapse occurs when the document inside the Telegram Mini App is either not scrollable (with a height equal to the `viewport`) or scrollable but not scrolled (where the `scrollY` of the `window` object equals zero). In such instances, swiping down is interpreted as a command to collapse the document, reducing its size. ![Diagram shows why telegram miniapp collapse on scroll or swipe down action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdt02l3n15i085tcwa54.jpg) Now let's proceed to implement the solution. I'll provide a step-by-step guide to resolve the problem. ### Step-by-Step Solution: #### Step 1: Ensure the Document is Scrollable: Firstly, it's essential to ensure that the document is scrollable. We achieve this by checking if the document's scroll height is greater than the viewport height. If not, we adjust the document's height accordingly. ```javascript // Ensure the document is scrollable function ensureDocumentIsScrollable() { const isScrollable = document.documentElement.scrollHeight > window.innerHeight; // Check if the document is scrollable if (!isScrollable) { /* Set the document's height to 100 % of the viewport height plus one extra pixel to make it scrollable. */ document.documentElement.style.setProperty( "height", "calc(100vh + 1px)", "important" ); } } // Call ensureDocumentIsScrollable function when the entire page has loaded. window.addEventListener("load", ensureDocumentIsScrollable); ``` #### Step 2: Prevent `window.scrollY` from Becoming Zero Next, we prevent window.scrollY from becoming zero when swiping down on the scrollable element. This prevents unexpected collapses when swiping down. ```javascript // Prevent windwo.scrollY from becoming zero function preventCollapse(event) { if (window.scrollY === 0) { window.scrollTo(0, 1); } } // Attach the above function to the touchstart event handler of the scrollable element const scrollableElement = document.querySelector(".scrollable-element"); scrollableElement.addEventListener("touchstart", preventCollapse); ``` Now that we've outlined the steps, let's integrate the solution into your code. Below is the full code snippet. _I've removed unnecessary code and styles to understand the code better._ ```html

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

``` By implementing these adjustments, your Telegram Mini App will no longer suffer from unexpected collapses when scrolling for swiping down. I encourage you to deploy the provided code for a Telegram Web App and observe the results firsthand. Additionally, you can experience the fix in action on a Telegram Mini App I've applied this solution to: [@theme_inspector_bot](https://t.me/theme_inspector_bot/app)

nimaxin

How to Fix The Telegram Mini App Scrolling Collapse Issue: A Handy Trick

Join Our Newsletter. No Spam, Only the good stuff.