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

Telegram webapp scrolling issue

I’m building app with Bubble.io and use it in Telegram webapp. When I pull down (scrolling up) on top of the page Telegram recognise it as close gesture and trying to minimize the window of app.

Maybe someone could explain me how it works and knows how it can be fixed?

Thanks

I tried ton of things but nothing works. I know that it is 100% possible and problem lay down somewhere in viewport/scroll/position setting.
The same problem I saw on forums of Flutter apps.

Tags:

2

Answers


  1. 0

    I had a similar problem and it helped me to remove fixed height values from containers (height, max-height)

    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