如何实现垂直滚动时让顶部迷你导航（div）水平滚动？

直接用CSS就能实现这个需求，核心是让导航固定在顶部，同时开启横向溢出滚动，具体实现如下：

1. HTML结构 #

先搭建基础的导航和页面内容结构：

<div class="mini-nav">
  <a href="#">导航项1</a>
  <a href="#">导航项2</a>
  <a href="#">很长的导航项3</a>
  <a href="#">导航项4</a>
  <a href="#">导航项5</a>
  <a href="#">导航项6</a>
  <a href="#">导航项7</a>
  <a href="#">导航项8</a>
</div>

<div class="page-content">
  <!-- 这里放入足够多的页面内容，用来测试垂直滚动效果 -->
  <p>页面内容段落...</p>
  <p>页面内容段落...</p>
  <p>页面内容段落...</p>
  <!-- 重复添加段落让页面能产生垂直滚动条 -->
</div>

2. CSS核心样式 #

/* 顶部迷你导航核心样式 */
.mini-nav {
  position: fixed; /* 固定在顶部，不随页面垂直滚动消失 */
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 8px 16px;
  border-bottom: 1px solid #eee;
  overflow-x: auto; /* 横向溢出时自动显示滚动条 */
  white-space: nowrap; /* 强制导航项保持一行，不换行 */
}

/* 导航项基础样式（可选） */
.mini-nav a {
  display: inline-block;
  margin-right: 16px;
  text-decoration: none;
  color: #333;
}

/* 避免页面内容被固定导航遮挡 */
.page-content {
  margin-top: 48px; /* 值等于导航的实际高度，可根据需求调整 */
}

/* 可选优化：隐藏滚动条但保留滚动功能（适配不同浏览器） */
.mini-nav::-webkit-scrollbar {
  display: none; /* Chrome、Safari 生效 */
}
.mini-nav {
  -ms-overflow-style: none; /* IE、Edge 生效 */
  scrollbar-width: none; /* Firefox 生效 */
}

效果说明 #

• 页面垂直滚动时，导航会始终固定在顶部位置
• 当导航项总宽度超出屏幕宽度时，导航栏支持水平滚动（显示滚动条或隐藏滚动条但可拖拽滑动），用户能查看所有溢出的导航内容

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