固定导航栏重叠页面滚动条问题求助（需保留Snap Scroll）

核心思路 #

将滚动吸附效果绑定到整个页面的滚动容器（<html>或<body>），而非主内容区，同时调整导航栏和内容区的布局，既避免滚动条重叠，又保留吸附效果。

具体修改步骤 #

1. 迁移滚动吸附属性到页面根容器
   给<html>或<body>添加Tailwind类，让整个页面成为滚动吸附容器：

   <html class="snap-y snap-mandatory overflow-y-auto scroll-smooth">
   

   （scroll-smooth为可选类，用于优化滚动过渡的流畅度）

2. 调整导航栏样式
   确保导航栏固定在顶部、层级足够高，且自动适配页面宽度（不会覆盖滚动条）：

   <nav class="fixed top-0 left-0 right-0 bg-white z-50 h-16">
     <!-- 导航内容 -->
   </nav>
   

3. 修改主内容区布局
   移除主内容区的overflow-y相关类，添加顶部内边距避免内容被导航栏遮挡，同时给每个需要吸附的区块加上snap-start类：

   <div class="pt-16">
     <section class="snap-start h-screen bg-blue-200">区块1</section>
     <section class="snap-start h-screen bg-green-200">区块2</section>
     <section class="snap-start h-screen bg-yellow-200">区块3</section>
   </div>
   

原理说明 #

• 把滚动容器从主内容区改为页面根容器后，滚动条属于整个页面，导航栏的right-0会自动避开滚动条，不会出现重叠问题。
• 移除主内容区的overflow-y属性，避免嵌套滚动容器导致的滚动逻辑冲突，同时保留了基于页面滚动的吸附效果。
• 主内容区的pt-16（数值需与导航栏高度对应）确保页面内容不会被固定导航栏遮挡。

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