iOS Safari/Chrome中fixed定位在键盘弹出时的修复方案咨询

需要实现一个fixed-bottom的div，使其始终固定在页面底部，且输入框获得焦点时能显示在虚拟键盘上方。该功能在Android设备上运行正常，但在iOS的Safari和Chrome浏览器中完全失效。尝试MDN Web开发文档中的VisualViewport方案后，iOS上初始状态显示正常，但滚动后重新聚焦输入框时元素位置出现偏移，且发现iOS系统中键盘弹出不会触发resize事件。求可行解决方案。

针对iOS Safari/Chrome的特殊行为，可通过以下关键点修复：

• 替换resize事件监听对象：iOS键盘弹出时不会触发window.resize，但会触发visualViewport.resize，需将监听对象从window切换到visualViewport。
• 修正视口高度计算逻辑：滚动后layoutViewport.getBoundingClientRect()的高度计算易出现偏差，改用document.documentElement.clientHeight获取布局视口高度更可靠。
• 移除冗余状态更新：原代码中setBottomPos会触发组件重绘，实际仅需直接操作DOM样式，可移除该状态变量提升性能。
• 添加焦点触发逻辑：在输入框聚焦时主动触发位置更新，确保键盘弹出时元素位置即时修正。

修改后的React代码 #

import React, { useEffect, useRef } from 'react';

function CustomModal() {
  const bottomBarRef = useRef(null);
  const inputRef = useRef(null);

  useEffect(() => {
    const bottomBar = bottomBarRef.current;
    const visualViewport = window.visualViewport;

    const updateBottomBarPosition = () => {
      if (!visualViewport || !bottomBar) return;
      
      // 用documentElement.clientHeight替代原layoutViewport高度计算
      const layoutViewportHeight = document.documentElement.clientHeight;
      const offsetTop = visualViewport.height - layoutViewportHeight + visualViewport.offsetTop;
      
      bottomBar.style.transform = `translate(${visualViewport.offsetLeft}px, ${offsetTop}px) scale(${1 / visualViewport.scale})`;
    };

    // 监听visualViewport的scroll和resize事件
    visualViewport?.addEventListener('scroll', updateBottomBarPosition);
    visualViewport?.addEventListener('resize', updateBottomBarPosition);

    // 输入框聚焦时主动触发位置更新
    const handleFocus = () => {
      requestAnimationFrame(updateBottomBarPosition);
    };
    inputRef.current?.addEventListener('focus', handleFocus);

    // 初始定位
    updateBottomBarPosition();

    // 清理监听事件
    return () => {
      visualViewport?.removeEventListener('scroll', updateBottomBarPosition);
      visualViewport?.removeEventListener('resize', updateBottomBarPosition);
      inputRef.current?.removeEventListener('focus', handleFocus);
    };
  }, []);

  return (
    <div>
      <div 
        ref={bottomBarRef} 
        style={{ 
          position: 'fixed', 
          bottom: 0, 
          left: 0, 
          width: '100%',
          backgroundColor: '#f0f0f0',
          padding: '10px',
          boxSizing: 'border-box'
        }}
      >
        some bottom content here
      </div>

      <div style={{ paddingBottom: '60px' }}>
        <input 
          ref={inputRef} 
          type="text" 
          style={{ width: '100%', padding: '10px', marginTop: '20px' }}
        />
        {/* 新增滚动测试内容 */}
        {Array.from({ length: 20 }).map((_, i) => (
          <p key={i} style={{ padding: '15px' }}>滚动测试内容 {i+1}</p>
        ))}
      </div>
    </div>
  );
}

export default CustomModal;

额外说明 #

• 使用useRef替代getElementById，符合React组件开发最佳实践；
• 添加requestAnimationFrame确保在键盘弹出后DOM更新完成再执行位置计算；
• 给底部栏添加基础样式，方便测试时直观观察位置变化。

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