IOS设备中textarea聚焦时页面上移且无法恢复的问题求助

针对iOS设备上textarea聚焦后页面上移、失焦无法恢复原位置的问题，试试以下几种可行的解决方法：

• 记录滚动位置并延迟恢复
  iOS Safari的blur事件触发时，页面的滚动状态可能还未稳定，通过延迟执行滚动恢复可以规避这个问题：

  let savedScrollY;
  const targetTextarea = document.querySelector('textarea');
  
  targetTextarea.addEventListener('focus', () => {
    // 保存当前滚动位置
    savedScrollY = window.scrollY || document.documentElement.scrollTop;
  });
  
  targetTextarea.addEventListener('blur', () => {
    // 延迟100ms执行滚动，确保页面状态稳定
    setTimeout(() => {
      window.scrollTo(0, savedScrollY);
    }, 100);
  });
  

• 固定body定位防止滚动偏移
  在textarea聚焦时将body设为固定定位，锁定当前滚动位置，失焦后恢复定位并还原滚动：

  const targetTextarea = document.querySelector('textarea');
  
  targetTextarea.addEventListener('focus', () => {
    const scrollY = window.scrollY || document.documentElement.scrollTop;
    document.body.style.position = 'fixed';
    document.body.style.top = `-${scrollY}px`;
    document.body.style.width = '100%'; // 避免宽度收缩
  });
  
  targetTextarea.addEventListener('blur', () => {
    const scrollY = parseInt(document.body.style.top);
    document.body.style.position = '';
    document.body.style.top = '';
    document.body.style.width = '';
    window.scrollTo(0, -scrollY);
  });
  

• 优化viewport设置
  检查页面的viewport meta标签，确保包含viewport-fit=cover属性，部分场景下可以改善iOS的滚动行为：

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

• 排查父容器滚动冲突
  如果textarea嵌套在带有overflow: scroll的容器中，尝试给容器添加-webkit-overflow-scrolling: touch，同时确保容器没有设置过高的高度，避免和页面滚动产生冲突。

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