Flexbox与恼人滚动条问题：实现固定导航与内容滚动布局

嘿，这个问题我做项目时也碰到过！核心原因就是固定定位的导航栏会“盖”在页面默认的滚动条上面，导致滚动条被截断。咱们用两种方案来搞定它，还能强化你的悬浮视觉效果～

方案一：让滚动条只属于内容区域（最推荐） #

这个思路最稳妥，就是把页面拆成“固定导航”和“可滚动内容”两部分，用Flex布局撑满整个视口，让滚动条只出现在内容区域，完全避开导航栏。

示例代码 #

<div class="page-wrap">
  <!-- 悬浮导航栏 -->
  <nav class="float-nav">
    这里是你的导航文本内容
  </nav>

  <!-- 可滚动的主内容 -->
  <main class="content-area">
    <!-- 这里放你的长文本内容 -->
    <p>测试内容...</p>
    <p>测试内容...</p>
    <!-- 重复足够多来模拟超出视口 -->
  </main>
</div>

/* 先重置默认样式，避免浏览器自带的margin/padding搞事 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 让整个页面容器占满视口高度 */
.page-wrap {
  display: flex;
  height: 100vh;
  /* 导航在侧边就用row，顶部导航就改成column */
  flex-direction: row;
}

/* 悬浮导航栏：用fixed固定住，占满高度/固定宽度 */
.float-nav {
  position: fixed;
  width: 260px;
  height: 100vh;
  background: #fff;
  /* 加个阴影强化悬浮感 */
  box-shadow: 2px 0 8px rgba(0,0,0,0.1);
}

/* 可滚动内容区域 */
.content-area {
  /* 让内容区域填充剩余空间 */
  flex: 1;
  /* 给左边加margin，避开固定导航 */
  margin-left: 260px;
  padding: 24px;
  /* 开启垂直滚动 */
  overflow-y: auto;
  /* 可选：美化滚动条 */
  scrollbar-width: thin;
}

关键注意点 #

• 如果不想用position: fixed，也可以直接让导航栏作为Flex容器的一个子项，设置固定宽度/高度，不用脱离文档流，这样连margin都不用加，内容区域会自动避开导航，滚动条也不会被遮挡。
• 把滚动条放在内容区域，用户滚动时只会动内容，导航一直悬浮，完全符合你的需求。

方案二：调整页面滚动条位置（适合必须用页面滚动的场景） #

如果你坚持要让整个页面滚动，那可以给body加个偏移，让页面内容避开导航栏，这样滚动条就不会被导航盖住了。

示例代码 #

body {
  /* 导航在左侧，就加左margin等于导航宽度 */
  margin-left: 260px;
  overflow-y: auto;
}

.float-nav {
  position: fixed;
  left: 0;
  top: 0;
  width: 260px;
  height: 100vh;
  background: #fff;
}

这种方法简单，但缺点是页面滚动时，整个页面都会动，导航虽然悬浮，但体验不如方案一纯粹。

额外小技巧：强化悬浮视觉效果 #

想要导航栏更有“悬浮感”？加个背景模糊和阴影就搞定了：

.float-nav {
  box-shadow: 0 0 12px rgba(0,0,0,0.15);
  /* 背景模糊效果，需要半透明背景配合 */
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.9);
}

这样导航栏看起来就像浮在内容上面，质感一下子就上来了～

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