Telegram小程序移动端（iOS/Android）滚动异常问题咨询

针对网页端运行正常但iOS及Android App端出现的滚动异常问题，可尝试以下几种实操解决方案：

• 优化容器触摸行为
  给滚动容器添加CSS属性，规避iOS原生滚动与自定义滚动的冲突，同时启用iOS平滑滚动：

  .scroll-container {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  

• 阻止事件冒泡
  若页面存在嵌套滚动元素，通过JS阻止触摸事件向上冒泡，避免层级滚动冲突：

  document.querySelector('.scroll-container').addEventListener('touchmove', (e) => {
    e.stopPropagation();
  }, { passive: false });
  

• 使用官方滚动组件
  若基于Telegram官方小程序框架（如TMA.js）开发，优先使用内置的scroll-view组件，该组件针对移动端场景做了专门适配，能避免多数原生滚动问题。

• 调整容器布局约束
  确保滚动容器设置明确的高度或最大高度，避免因容器高度自适应导致的滚动触发异常：

  .scroll-container {
    max-height: 80vh; /* 根据实际页面布局调整数值 */
  }
  

• 排查冲突样式
  移除或调整页面中position: fixed定位的元素，避免其干扰滚动容器的布局计算；同时检查父元素是否设置overflow: hidden，导致滚动行为被抑制。

内容的提问来源于stack exchange，提问作者Mack Doe