前端开发中如何实现水平方向的滚动效果

日常开发里水平滚动用原生CSS就能快速实现，不需要额外引入第三方库，下面是两种最常用的实现方式，附常见踩坑说明：

方案1：Flex布局实现（推荐，无兼容坑） #

这是目前业务场景用得最多的方案，不会出现行内元素的默认空白间隙问题，布局灵活度高。

核心代码 #

/* 滚动容器样式 */
.h-scroll-wrap {
  display: flex;
  overflow-x: auto; /* 开启水平滚动 */
  overflow-y: hidden; /* 隐藏垂直方向溢出 */
  gap: 16px; /* 控制列表项之间的间距 */
  padding: 12px;
  /* 移动端优化：开启iOS端原生流畅滚动 */
  -webkit-overflow-scrolling: touch;
  /* 可选：自定义滚动条样式 */
  scrollbar-width: thin;
}
.h-scroll-wrap::-webkit-scrollbar {
  height: 6px;
}
.h-scroll-wrap::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}

/* 列表项样式 */
.h-scroll-item {
  flex-shrink: 0; /* 核心：禁止项目收缩，保持设定宽度 */
  width: 200px; /* 按需设置每个滚动项的宽度 */
  height: 120px;
  border-radius: 8px;
  background: #f5f7fa;
}

对应的DOM结构：

<div class="h-scroll-wrap">
  <div class="h-scroll-item">内容块1</div>
  <div class="h-scroll-item">内容块2</div>
  <div class="h-scroll-item">内容块3</div>
  <div class="h-scroll-item">内容块4</div>
  <!-- 按需增加更多滚动项 -->
</div>

方案2：传统行内块实现 #

适合兼容极低版本浏览器的场景，核心逻辑是让子元素强制在同一行排布不换行。

核心代码 #

.h-scroll-wrap-old {
  white-space: nowrap; /* 核心：强制子元素不换行 */
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 0; /* 清除行内块之间的默认空白间隙 */
  -webkit-overflow-scrolling: touch;
}
.h-scroll-item-old {
  display: inline-block; /* 核心：设置为行内块级元素，支持同行排布 */
  width: 200px;
  height: 120px;
  margin-right: 16px;
  font-size: 14px; /* 恢复内容区字体大小 */
  background: #f5f7fa;
  border-radius: 8px;
}

常见踩坑点 #

• 不要给滚动项设置width: 100%或者flex: 1，会导致项目自动撑满容器宽度，无法触发横向滚动
• 用Flex方案时一定要给滚动项加flex-shrink: 0，否则容器宽度不足时项目会被自动压缩，没法保持横向排列
• 需要滚动吸附效果（类似轮播每次滚动停在完整项目位置），只要给容器加scroll-snap-type: x mandatory，给滚动项加scroll-snap-align: start即可，不需要额外写JS逻辑
• 需要支持鼠标拖拽滚动的话，给容器绑定鼠标按下、移动、抬起事件，动态修改容器的scrollLeft属性就能实现

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