React移动端iOS键盘上推Div致头部隐藏问题求助

我之前做React聊天组件的时候也踩过iOS这个坑，跟你描述的一模一样——Android正常，iOS一唤起键盘整个页面就往上窜，头部直接不见了。给你几个我亲测有效的解决方案，按优先级试试：

方案一：用CSS Sticky固定头部（最简单） #

这是最直接的办法，给头部设置position: sticky，让它始终粘在视口顶部，同时确保父容器的布局不会干扰它：

// 外层容器占满整个视口，禁止整体滚动
.message-thread-wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

// 头部设置sticky，置顶并加z-index确保不被覆盖
.messages-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #fff; // 必须加背景色，不然会被下面的消息穿透
  // 你的其他头部样式...
}

// 内容区域占满剩余空间，内部滚动
.messages-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 80px; // 给底部的textarea预留高度，避免被遮挡
}

// 底部输入框固定在底部
textarea {
  height: 80px;
  // 你的其他输入框样式...
}

注意：如果sticky在部分iOS版本不生效，可以把外层容器的overflow改成visible，让内容区域单独处理滚动逻辑，确保头部的sticky能正常工作。

方案二：JS监听键盘弹出，主动调整布局 #

如果sticky方案有兼容性问题，可以用JS监听窗口高度变化，判断键盘是否弹出，然后手动调整内容区域高度或者滚动到头部：

import { useEffect, useRef } from 'react';

const MessageThread = () => {
  const headerRef = useRef(null);
  const contentRef = useRef(null);
  // 保存初始窗口高度，用来判断键盘是否弹出
  const initialWindowHeight = useRef(window.innerHeight);

  useEffect(() => {
    const handleKeyboardChange = () => {
      const currentHeight = window.innerHeight;
      // iOS键盘弹出时，窗口高度会明显变小（阈值可以自己调整）
      const isKeyboardOpen = currentHeight < initialWindowHeight.current * 0.85;

      if (isKeyboardOpen) {
        // 确保头部始终在可视区域
        if (headerRef.current) {
          headerRef.current.scrollIntoView({ behavior: 'instant', block: 'start' });
        }
        // 调整内容区域的最大高度，避免被键盘顶上去
        if (contentRef.current && headerRef.current) {
          const availableHeight = currentHeight - headerRef.current.offsetHeight - 80; // 80是输入框高度
          contentRef.current.style.maxHeight = `${availableHeight}px`;
        }
      } else {
        // 键盘收起时恢复默认高度
        if (contentRef.current) {
          contentRef.current.style.maxHeight = 'calc(100vh - 120px)'; // 120是头部+输入框的高度
        }
      }
    };

    // 监听窗口大小变化和输入框的聚焦/失焦事件
    window.addEventListener('resize', handleKeyboardChange);
    const textarea = document.querySelector('textarea');
    textarea?.addEventListener('focus', handleKeyboardChange);
    textarea?.addEventListener('blur', handleKeyboardChange);

    return () => {
      window.removeEventListener('resize', handleKeyboardChange);
      textarea?.removeEventListener('focus', handleKeyboardChange);
      textarea?.removeEventListener('blur', handleKeyboardChange);
    };
  }, []);

  return (
    <div className="message-thread-wrapper d-flex flex-column">
      <div ref={headerRef} className="messages-header d-flex flex-row justify-content-between">
        {/* 你的头部内容 */}
      </div>
      <div ref={contentRef} className="messages-content overflow-auto">
        {/* 你的消息内容 */}
      </div>
      <textarea placeholder="输入消息..." />
    </div>
  );
};

export default MessageThread;

方案三：调整Viewport设置 #

在你的index.html里更新viewport meta标签，加上viewport-fit=cover，这能让页面更好地适配iOS的安全区域，有时候也能缓解键盘顶起的问题：

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

为什么iOS会有这个问题？ #

简单说，iOS的键盘弹出时会缩小视口高度，而Android是调整页面的滚动位置，所以iOS页面的元素会被整体向上推，fixed/sticky元素的表现有时候会不符合预期，这就需要我们手动干预布局或者滚动行为。

先试试方案一，大部分情况都能解决，如果遇到特殊场景再用方案二，这两个方法都是生产环境验证过的。

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