当页面使用 overflow-y: scroll 实现 snap 滚动时，position: fixed 的导航栏会覆盖右侧滚动条；通过改为弹性布局（flex column）+ grow 容器替代固定定位，可让导航栏保留在顶部、不遮挡滚动条，同时维持滚动行为与视觉完整性。
当页面使用 `overflow-y: scroll` 实现 snap 滚动时，`position: fixed` 的导航栏会覆盖右侧滚动条；通过改为弹性布局（flex column）+ `grow` 容器替代固定定位，可让导航栏保留在顶部、不遮挡滚动条，同时维持滚动行为与视觉完整性。
在构建具有滚动吸附（snap scroll）效果的单页应用时，开发者常采用 position: fixed 为导航栏实现“始终置顶”，但这一做法会带来一个隐蔽却影响体验的问题：固定定位元素脱离文档流，导致其覆盖 <main> 区域右侧的原生滚动条——用户无法直观看到或点击滚动条，且在某些系统（如 macOS 默认隐藏滚动条）下更易造成交互困惑。
根本原因在于：fixed 元素不参与布局计算，其 z-index 虽默认较高，但更重要的是它“悬浮”于内容层之上，自然叠盖在 overflow-y: scroll 容器生成的滚动条上。
✅ 推荐解决方案：放弃 position: fixed，改用语义化弹性布局
核心思路是：
- 将 <body> 设为 flex flex-col h-screen，建立垂直主轴；
- <nav> 作为第一个子元素自然占据顶部空间；
- <main> 使用 grow（即 flex: 1），自动填充剩余高度，并在其内部启用 snap-y snap-mandatory overflow-y-scroll；
- 此时滚动条属于 <main> 自身，位于其右边界，完全不受 <nav> 影响。
以下是优化后的完整结构（Tailwind CSS v3.4+）：
<!DOCTYPE html>
<html lang="en">
<script src="https://cdn.tailwindcss.com/3.4.0"></script>
<body class="flex flex-col h-screen">
<!-- 导航栏：正常流内布局，不脱离文档流 -->
<nav class="flex flex-no-wrap items-center justify-between px-10 py-2 bg-slate-500">
<div><p>logo</p></div>
<div class="flex flex-row gap-10">
<ul class="flex flex-row items-center gap-5">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/profile">Profile</a></li>
</ul>
<div class="w-10 h-10 rounded-full flex items-center justify-center overflow-hidden">
<img
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3"
alt="profile" width="40" height="40" />
</div>
</div>
</nav>
<!-- 主内容区：占据剩余空间，内部启用 snap 滚动 -->
<main class="snap-y snap-mandatory overflow-y-scroll grow">
<section class="flex flex-1 h-full w-full bg-black snap-start flex items-center justify-center">
<p class="text-white text-2xl">page 1</p>
</section>
<section class="flex flex-1 h-full w-full bg-slate-500 snap-start flex items-center justify-center">
<p class="text-white text-2xl">page 2</p>
</section>
<section class="flex flex-1 h-full w-full bg-amber-300 snap-start flex items-center justify-center">
<p class="text-gray-900 text-2xl">page 3</p>
</section>
</main>
</body>
</html>? 关键要点说明：
- h-screen 确保 <body> 占满视口高度，避免因内容不足导致 <main> 无法撑开；
- grow 等价于 flex: 1，使 <main> 动态适应 <nav> 高度变化（如响应式折叠菜单）；
- 所有 snap-start 区块需设置明确高度（如 h-full），否则 snap 行为可能失效；
- 若需兼容旧版 Safari，建议添加 -webkit-overflow-scrolling: touch 及 scroll-snap-type 前缀（现代 Tailwind 已自动处理）。
⚠️ 注意事项：
- 不要对 <nav> 添加 z-index 或 top: 0 —— 这会意外触发新层叠上下文，破坏 flex 布局预期；
- 避免在 <main> 上同时设置 min-h-[calc(100vh-64px)] 类似硬编码高度，它会与 grow 冲突并导致滚动异常；
- 如需支持移动端手势返回（iOS Safari），请确保 <main> 未禁用 overscroll-behavior: contain（默认已安全）。
该方案兼顾可访问性（滚动条可见）、性能（无重绘抖动）与维护性（纯 CSS 布局，零 JS 依赖），是现代滚动布局的最佳实践之一。
