固定导航栏页面：如何优化滚动条显示与浏览器UI滚动逻辑？

初始实现方案 #

我想要搭建一个顶部带固定导航栏的网站，其余内容可滚动，用Tailwind CSS写出了基础实现，代码如下：

<main class="flex flex-col text-foreground">
    <nav class="fixed w-full h-24 bg-black">Nav.</nav>
    <div class="h-[calc(100vh-6rem)]">
        <div class="mt-24 h-[calc(100vh-6rem)] overflow-y-scroll">
            <slot />
        </div>
        <footer class="min-h-24">Footer.</footer>
    </div>
</main>

<style>
   html {
     @apply bg-gradient-to-b from-red-500 to-red-900 bg-fixed;
   }

   body {
     @apply min-h-[100dvh];
   }
</style>

这个方案在移动端能先滚动隐藏浏览器UI再滚动页面内容，但存在视觉问题：滚动条从页面顶部开始渲染，会覆盖不可滚动的导航栏区域。

优化尝试方案 #

为了优化滚动条的视觉效果，我调整了实现，把导航栏下方的区域设为可滚动，代码如下：

<main class="text-foreground flex flex-col">
  <nav class="fixed h-24 w-full bg-black">Nav.</nav>
  <div class="h-[calc(100vh-6rem)]">
    <div class="mt-24 h-[calc(100vh-6rem)] overflow-y-scroll">
      <slot/>
    </div>
    <footer class="min-h-24 bg-red-500">Footer.</footer>
  </div>
</main>

<style>
  html {
    @apply bg-gradient-to-b from-red-500 to-red-900 bg-fixed;
  }

  body {
    @apply min-h-[100dvh];
  }
</style>

但这个方案带来了新问题：页面出现双滚动条，而且必须先滚动完内容区域，才能继续滚动隐藏浏览器UI，不符合预期需求。

寻求解决方案 #

现在想找到最优的解决办法，希望实现以下任一效果：

• 仅当浏览器UI隐藏后，才开始滚动页面内容
• 让滚动条的视觉范围从导航栏下方开始，不覆盖导航栏

是否必须通过隐藏原生滚动条、自定义滚动条的方式才能解决这个问题？

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