Telegram API Question posted in
A comprehensive official documentation can be found here.

A bug with collapsing when scrolling in Web App for Telegram Bot

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.

Tags:

2

Answers


  1. 0

    Add this to the body section in the css to disable any touch events:

    body {
    touch-action: none !important;
}
    Login or Signup to reply.
  2. 0

    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:

    1. Document/body magic (without this touchmove step doesn’t fix the problem for some reason):

    (tailwind style)
    document: h-auto, overflow-hidden
    body: min-h-screen h-screen overflow-hidden

    js code:

    const overflow = 100
document.body.style.overflowY = 'hidden'
document.body.style.marginTop = `${overflow}px`
document.body.style.height = window.innerHeight + overflow + "px"
document.body.style.paddingBottom = `${overflow}px`
window.scrollTo(0, overflow)
    1. Block touchmove (block scroll on doc and body, because of the first step. Make body’s child scrollable and then…):
    let ts: number | undefined
const onTouchStart = (e: TouchEvent) => {
  ts = e.touches[0].clientY
}
const onTouchMove = (e: TouchEvent) => {
  if (scrollableEl) {
    const scroll = scrollableEl.scrollTop
    const te = e.changedTouches[0].clientY
    if (scroll <= 0 && ts! < te) {
      e.preventDefault()
    }
  } else {
    e.preventDefault()
  }
}
document.documentElement.addEventListener('touchstart', onTouchStart, { passive: false })
document.documentElement.addEventListener('touchmove', onTouchMove, { passive: false })

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search