Telegram WebApp下拉误触关闭手势问题求助

问题原理 #

Telegram WebApp的WebView内置原生手势逻辑：当页面滚动容器处于**scrollTop=0（顶部边界）**状态时，若用户继续向上拖动（触发向下滚动动作），WebView会将该行为识别为「下拉关闭」手势，触发应用最小化/关闭。

在Bubble.io中，默认页面结构会把所有内容放入全屏滚动容器，当用户滚动到顶部后继续拖动，滚动事件会冒泡到Telegram的WebView容器，触发上述手势，这就是问题的核心根源。

修复方案（Bubble.io 专属操作） #

1. 阻止顶部滚动事件冒泡 #

在页面的「自定义HTML/JavaScript」区域（页面设置→HTML标签页或元素的自定义脚本）添加以下代码，拦截顶部边界的滚动事件：

document.addEventListener('touchmove', function(e) {
  // 定位Bubble默认的滚动容器，若用了自定义容器则替换选择器
  const scrollContainer = document.querySelector('.bubble-page-content');
  if (scrollContainer && scrollContainer.scrollTop === 0) {
    e.preventDefault();
    e.stopPropagation();
  }
}, { passive: false });

2. 修正视口元标签配置 #

修改页面的视口设置，限制原生滚动与缩放行为，减少手势触发概率：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">

在Bubble中，可在页面设置的「视口元标签」字段直接替换上述内容。

3. 添加顶部缓冲元素 #

在页面最顶部添加一个高度为1px的透明不可滚动Group容器，避免滚动容器直接触达顶部边界：

• 拖入Group元素到页面最上层，设置高度1px，背景透明
• 勾选「不允许滚动」属性，确保该元素不会触发滚动行为

4. 通过Telegram API直接禁用手势 #

若上述方法无效，可调用Telegram WebApp API直接关闭垂直滑动手势：

// 页面加载时执行该脚本
window.Telegram.WebApp.disableVerticalSwipes();

在Bubble编辑器中，将这段代码添加到「页面加载时」动作的「运行JavaScript」模块中。

内容的提问来源于stack exchange，提问作者Mark S.