React开发Telegram Web App：如何禁用下滑关闭功能？

我用React开发了一款内嵌在Telegram Web App里的消球游戏（玩法是收集小球组合消除），但下滑操作会触发Telegram关闭应用的动作，试了touch-action: none没用，以下是可行的解决办法：

• 阻止触摸事件冒泡（精准控制）
  在游戏的根容器上绑定触摸移动事件，阻止事件冒泡到Telegram的外层容器，同时按需阻止默认行为（如果游戏不需要垂直滑动的话）：

  const handleTouchMove = (e) => {
    e.stopPropagation();
    // 若游戏本身不需要垂直滑动，可加上这行
    // e.preventDefault();
  };
  
  // 组件内使用
  <div className="game-wrapper" onTouchMove={handleTouchMove}>
    {/* 游戏内容 */}
  </div>
  

  如果游戏需要保留部分滑动功能，可以通过判断滑动方向（比如只有向下滑动超过阈值才阻止）来适配。

• 调用Telegram官方API禁用垂直滑动关闭
  Telegram Web App提供了专门的API来禁用垂直滑动关闭，这是最可靠的方案，在App初始化时调用即可：

  // 在组件初始化或useEffect中执行
  useEffect(() => {
    if (window.Telegram?.WebApp) {
      window.Telegram.WebApp.disableVerticalSwipes();
    }
  }, []);
  

• 修正CSS的touch-action作用范围
  之前的touch-action: none无效可能是因为样式没作用到正确的元素，尝试将样式加到游戏最外层容器，同时确保容器占满视口且无溢出：

  .game-wrapper {
    touch-action: none;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: fixed;
  }
  

内容的提问来源于stack exchange，提问作者Gleb Lyashenkov