能够在水平滚动框内垂直滚动外部布局

<div class="outer-container">
  <div class="inner-container">
    <!-- 垂直滚动的内容 -->
    <div class="content">
      <!-- 内容1 -->
      <div class="item">...</div>
      <!-- 内容2 -->
      <div class="item">...</div>
      <!-- 内容3 -->
      <div class="item">...</div>
      <!-- ...更多内容 -->
    </div>
  </div>
</div>

.outer-container {
  width: 100%; /* 外部容器宽度 */
  overflow-x: auto; /* 水平滚动 */
  white-space: nowrap; /* 内容不换行 */
}

.inner-container {
  display: inline-block; /* 内部容器水平排列 */
}

.content {
  display: flex; /* 内容垂直排列 */
  flex-direction: column;
}

.item {
  /* 单个内容项样式 */
}

// 使用第三方库（如jQuery）实现平滑滚动效果
$('.outer-container').scrollLeft($('.inner-container').width());