Telegram 网络应用程序滚动问题

Question

我正在使用 Bubble.io 构建应用程序并在 Telegram Web 应用程序中使用它。当我在页面顶部下拉（向上滚动）时，Telegram 将其识别为关闭手势并尝试最小化应用程序窗口。

也许有人可以向我解释它是如何工作的并知道如何修复它？

谢谢

我尝试了很多东西，但没有任何效果。我知道这是 100% 可能的，问题出在视口/滚动/位置设置的某个地方。 我在 Flutter 应用论坛上看到了同样的问题。

Answer 1

我遇到了类似的问题，它帮助我从容器中删除固定高度值（高度，最大高度）

Answer 2

我调查了@tapswap_bot（他们的道具）源代码（webkit 调试）并找到了解决方案。我还使滚动工作正常（他们的解决方案破坏了它）。

实施步骤：

1. 文档/身体魔法（没有这个触摸移动步骤由于某种原因无法解决问题）：

（顺风式） 文档：h-auto，溢出隐藏 body: min-h-screen h-screen 溢出-隐藏

js代码：

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)

2. 阻止 touchmove（阻止文档和正文上的滚动，因为第一步。使正文的子级可滚动，然后...）：

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 })

之后它就完美地工作了，没有愤怒卷轴会破坏它。唯一担心的是，也许某些设备已经反转了滚动方向，在这种情况下，我们将需要反转触摸移动条件逻辑，但无论如何 - 它正在工作。