TailwindCSS移动端滚动主面板被底部导航栏遮挡及滚动异常问题

问题分析 #

• 主面板底部被底部导航栏遮挡：核心原因是未正确设置主面板的底部内边距，或布局高度计算未考虑底部导航栏的占位高度
• 滚动行为异常：属于移动端常见的滚动溢出触发页面整体滚动的问题，主面板未被设置为独立的滚动容器，导致侧边滚动时触发页面全局滚动

解决步骤 #

1. 修复主面板被遮挡问题 #

如果底部导航栏采用固定定位，需给主面板设置与导航栏高度一致的底部内边距，同时通过flex布局让主面板自动填充剩余空间：

<div class="flex flex-col h-screen">
  <header class="h-16 bg-gray-800 text-white">Header</header>
  <!-- flex-1 让主面板占满剩余空间，overflow-y-auto 开启内部滚动，pb-16 匹配底部导航栏高度 -->
  <main class="flex-1 overflow-y-auto pb-16">
    <!-- 主内容区域 -->
  </main>
  <footer class="fixed bottom-0 left-0 right-0 h-16 bg-gray-800 text-white">Footer</footer>
</div>

若底部导航栏为静态布局，可直接通过flex布局的flex-1属性让主面板自动填充header和footer之外的空间，无需额外内边距。

2. 修复滚动异常问题 #

给主面板添加滚动溢出限制，阻止滚动触发页面整体移动，确保滚动行为仅在主面板内部发生：

<!-- 用Tailwind类直接实现 -->
<main class="flex-1 overflow-y-auto pb-16 overscroll-y-contain">
  <!-- 主内容区域 -->
</main>

对应的CSS属性为：

main {
  overscroll-behavior-y: contain;
}

同时建议给body添加overflow-hidden，避免页面全局滚动与主面板滚动冲突。

验证要点 #

• 确认底部导航栏高度与主面板底部内边距值完全匹配
• 检查主面板的overflow-y-auto和overscroll-y-contain属性是否正确生效
• 测试移动端滚动：首次滚动应为内容滚动，侧边滚动时主面板不会整体上下移动

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