使用Tailwind实现snap滚动时导航栏占用滚动空间问题

问题根源 #

• 你把粘性导航栏嵌套在snap-y滚动容器内部，还给它的父容器加了h-screen，这会让滚动快照系统把这个导航容器当成一个独立的快照项，导致滚动时出现顶部空白和额外的不可访问空间。
• 粘性元素的定位逻辑依赖于视口或父级滚动上下文，放在滚动快照容器里会打乱快照的位置计算。

修正方案 #

1. 把粘性导航栏从滚动快照容器里移出来，直接放在<body>下，让它的定位上下文是整个视口。
2. 调整滚动快照容器的高度，减去导航栏的高度（比如导航栏高100px，就用calc(100vh - 100px)），避免内容被导航栏遮挡。
3. 清除html和body的默认边距，防止不必要的滚动偏移。

修正后的代码 #

<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
  <!-- 粘性导航栏独立于滚动容器 -->
  <div class="sticky top-0 left-0 w-screen h-[100px] bg-gray-400 z-50">
    Nav Bar
  </div>
  <!-- 滚动容器高度适配导航栏下方空间 -->
  <div class="h-[calc(100vh-100px)] w-screen snap-y snap-mandatory overflow-scroll">
    <div class="snap-start w-screen h-full bg-cyan-400"></div>
    <div class="snap-start w-screen h-full bg-yellow-400"></div>
    <div class="snap-start w-screen h-full bg-red-400"></div>
    <div class="snap-start w-screen h-full bg-lime-400"></div>
  </div>
</body>

关键细节说明 #

• 导航栏直接设置sticky top-0，不需要额外的h-screen容器，这样它会稳定固定在视口顶部，不会被滚动快照影响。
• 滚动容器用calc(100vh - 100px)确保内容刚好填满导航栏下方的视口，每个幻灯片用h-full匹配容器高度，保持全屏展示效果。
• 添加z-50保证导航栏始终在幻灯片上方，不会被内容遮挡。

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