如何在ReactJS应用中解决iPhone X及后续机型的滚动条问题

方案1：利用CSS安全区域变量与动态视口高度 #

iOS Safari针对刘海屏提供了env(safe-area-inset-top)、env(safe-area-inset-bottom)等安全区域变量，结合动态视口高度单位100dvh（适配刘海、底部指示器等动态变化的视口区域），可以精准匹配可视范围：

/* 全局样式或根容器样式 */
:root {
  min-height: 100dvh;
  min-height: -webkit-fill-available; /* 兼容旧版iOS Safari */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

-webkit-fill-available作为降级方案适配旧版iOS设备，box-sizing: border-box确保padding不会额外撑开容器高度，避免超出视口。

方案2：用Flex/Grid布局替代固定高度 #

避免硬编码height: 100vh，改用Flex或Grid让容器自动填充可视区域，仅当内容超出时才触发滚动：

// 根组件示例
function App() {
  return (
    <div style={{ 
      display: 'flex', 
      flexDirection: 'column', 
      minHeight: '100dvh',
      minHeight: '-webkit-fill-available',
      margin: 0
    }}>
      <header>应用头部</header>
      {/* 主内容区自动填充剩余空间，内容超出时才显示滚动条 */}
      <main style={{ flex: 1, overflowY: 'auto' }}>
        应用主体内容
      </main>
      <footer>应用底部</footer>
    </div>
  );
}

方案3：React中动态计算视口高度 #

如果需要更精细的控制，可通过监听窗口变化事件获取真实可视高度：

import { useState, useEffect } from 'react';

function App() {
  const [viewportHeight, setViewportHeight] = useState(window.innerHeight);

  useEffect(() => {
    const updateHeight = () => setViewportHeight(window.innerHeight);
    
    window.addEventListener('resize', updateHeight);
    window.addEventListener('orientationchange', updateHeight);
    
    return () => {
      window.removeEventListener('resize', updateHeight);
      window.removeEventListener('orientationchange', updateHeight);
    };
  }, []);

  return (
    <div style={{ 
      minHeight: `${viewportHeight}px`,
      padding: 'env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)',
      boxSizing: 'border-box'
    }}>
      {/* 应用内容 */}
    </div>
  );
}

额外注意事项 #

• 重置浏览器默认的margin和padding，避免额外的空间占用
• 不要随意给容器设置overflow: scroll，仅在内容确实需要滚动时启用

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