React+Grommet移动端页面滚动异常问题求助

问题根源 #

1. 移动端浏览器的100vh会包含顶部导航栏/底部工具栏的高度，导致实际可滚动区域被这些系统元素遮挡，iOS端因为导航栏动态隐藏显示，问题更明显。
2. 绝对定位容器的滚动行为在移动端默认触发逻辑特殊，只有轻触时才会唤起滚动条，正常滚动时容易出现内容偏移。

具体修复方案 #

1. 用动态视口高度替代固定vh

直接把minHeight: '100vh'改成100dvh，dvh是动态视口高度，会自动排除浏览器系统栏的高度，完美适配移动端：

<Box direction="row" style={{ position: 'absolute', minHeight: '100dvh', width: '100%' }}>
  {/* 你的页面内容 */}
</Box>

2. 强制开启滚动并优化iOS滚动体验

给容器明确设置滚动属性，同时添加iOS专属的滚动优化，确保滚动条正常显示且滚动流畅：

<Box direction="row" style={{ 
  position: 'absolute', 
  minHeight: '100dvh', 
  width: '100%',
  overflowY: 'auto',
  WebkitOverflowScrolling: 'touch' // 修复iOS滚动卡顿和滚动条显示问题
}}>
  {/* 你的页面内容 */}
</Box>

3. 改用Grommet内置布局组件避免定位冲突

Grommet的<Main>组件已经做了移动端布局适配，不用自己写绝对定位，能避免定位带来的功能冲突：

<Main full="vertical">
  <Box direction="row" width="100%">
    {/* 你的页面内容 */}
  </Box>
</Main>

额外注意 #

如果页面有固定定位的导航栏，记得给内容容器加对应的padding-top，数值等于导航栏的高度，防止内容被导航栏遮挡。

内容的提问来源于stack exchange，提问作者Yavor from Team-GPT