如何实现外层垂直滚动列表、内部项为水平滚动列表的布局？

直接用原生HTML+CSS就能实现，核心是利用CSS的overflow属性控制滚动行为，具体实现如下：

1. HTML结构 #

<!-- 外层垂直滚动容器 -->
<div class="vertical-scroll-container">
  <!-- 第一个水平滚动项 -->
  <div class="horizontal-scroll-item">
    <div class="horizontal-content">
      <div class="item">项1-1</div>
      <div class="item">项1-2</div>
      <div class="item">项1-3</div>
      <div class="item">项1-4</div>
      <div class="item">项1-5</div>
      <div class="item">项1-6</div>
      <div class="item">项1-7</div>
      <div class="item">项1-8</div>
    </div>
  </div>
  <!-- 第二个水平滚动项 -->
  <div class="horizontal-scroll-item">
    <div class="horizontal-content">
      <div class="item">项2-1</div>
      <div class="item">项2-2</div>
      <div class="item">项2-3</div>
      <div class="item">项2-4</div>
      <div class="item">项2-5</div>
    </div>
  </div>
  <!-- 可添加更多水平滚动项 -->
  <div class="horizontal-scroll-item">...</div>
</div>

2. CSS样式 #

/* 重置全局默认样式，避免布局偏移 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 防止body出现多余滚动条 */
}

/* 外层垂直滚动容器：最大化高度，超出垂直范围时滚动 */
.vertical-scroll-container {
  height: 100vh; /* 占满整个视口高度 */
  overflow-y: auto; /* 垂直方向超出时显示滚动条 */
  padding: 10px;
  box-sizing: border-box;
}

/* 每个水平滚动项：固定高度 */
.horizontal-scroll-item {
  height: 120px; /* 自定义固定高度，可按需调整 */
  margin-bottom: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

/* 水平滚动内容容器：控制水平滚动行为 */
.horizontal-content {
  height: 100%;
  white-space: nowrap; /* 强制内容不换行，保持横向排列 */
  overflow-x: auto; /* 水平方向超出时显示滚动条 */
  padding: 10px;
  box-sizing: border-box;
}

/* 水平列表子项样式（可选，按需调整） */
.item {
  display: inline-block;
  width: 180px;
  height: 100%;
  background-color: #f5f5f5;
  margin-right: 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

关键逻辑说明 #

• 外层容器用height: 100vh确保高度最大化（占满当前视口），overflow-y: auto让垂直方向内容超出时自动出现滚动条。
• 每个水平滚动项设置固定height，内部内容容器通过white-space: nowrap让子元素横向排列，overflow-x: auto实现水平滚动。
• 全局重置html和body的边距、高度，避免布局偏移或多余滚动条干扰。

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