iOS Safari中触发textarea时的滚动异常问题求助

以下是几个实测有效的解决思路，针对你遇到的position: fixed和overflow: hidden无效的情况：

• 动态控制body定位与滚动
  监听textarea的聚焦/失焦事件，在聚焦时固定body位置并隐藏滚动，失焦后恢复原滚动位置，避免页面被键盘顶起后出现多余空白：

  let scrollPosition = 0;
  
  document.addEventListener('focusin', (e) => {
    if (e.target.tagName === 'TEXTAREA') {
      scrollPosition = window.pageYOffset;
      document.body.style.cssText = `position: fixed; top: -${scrollPosition}px; left: 0; right: 0; overflow: hidden;`;
    }
  });
  
  document.addEventListener('focusout', () => {
    document.body.style.cssText = '';
    window.scrollTo(0, scrollPosition);
  });
  

• 使用overscroll-behavior限制滚动溢出
  给body或包含textarea的容器添加overscroll-behavior: contain，阻止滚动事件冒泡到页面级滚动，避免触发页面多余滚动：

  body {
    overscroll-behavior: contain;
  }
  

• 优化viewport配置
  确保页面的viewport meta标签配置正确，禁止用户缩放并适配设备视口，减少iOS Safari的布局异常：

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

• 限制textarea自身滚动范围
  给textarea设置固定的最大高度并开启自身滚动，避免textarea内容过长时触发页面滚动：

  textarea {
    max-height: 220px; /* 根据实际需求调整 */
    overflow-y: auto;
    resize: vertical; /* 可选，允许用户调整高度 */
  }
  

如果单一方法无效，可以尝试组合使用，比如同时设置overscroll-behavior和动态控制body定位，大部分场景下都能解决这个iOS Safari的专属滚动问题。

内容的提问来源于stack exchange，提问作者Lucas N.