I want to build my mobile web application written in flutter in Telegram. At the same time, there is a problem: when scrolling down, the application collapses, as if I were collapsing the bottom sheet.
Web App; Telegram Web App; Video demonstration of the problem
I managed to work around this problem for iOS devices by adding the following script to the code:
document.addEventListener("touchmove", function (event) {
event.preventDefault();
},
{
passive: false
});
But on Android, the problem persists. I tried all the variations of working with touchmove, overflow, relative and other ways to disable scrolling on the page. The problem on Android has not been solved by any method that I have found.
2
Answers
Add this to the body section in the css to disable any touch events:
I’ve investigated @tapswap_bot (props to them) source code (webkit debug) and found the solution. I’ve also made the scrolling working (their solution was breaking it).
So steps to implement:
(tailwind style)
document: h-auto, overflow-hidden
body: min-h-screen h-screen overflow-hidden
js code:
After that it works perfectly, no rage scroll breaks it. The only concern is that maybe some device has reversed scroll direction, in that case we will need to reverse touchmove condition logic, but anyway – it’s working.