#横向滚动在移动端与桌面端的差异与解决方案

#1. 问题背景

在 Vue/React 等前端项目里，我们常常会实现一个横向滚动的列表，例如：

复制<div class="activity_container">
  <div v-for="item in list" :key="item.name" class="activity_item">
    {{ item.name }}
  </div>
</div>

并配合 flex 布局与固定宽度的子项，让子项在横向排列后出现滚动条。

在移动端（触屏设备），手指左右滑动时，容器能够自然横向滚动。
但在桌面端（PC 浏览器），很多时候看起来「不能滚动」。

#2. 移动端为什么能滚？

• 触摸事件：手指横向拖动会触发浏览器的横向滚动逻辑。
• 惯性滚动支持：加上 -webkit-overflow-scrolling: touch; 可以让
  iOS 上更顺滑。
• 屏幕窄：更容易产生溢出（内容宽度 > 屏幕宽度），滚动自然出现。

#3. 桌面端为什么看起来不行？

1. 鼠标滚轮方向：
   鼠标滚轮默认是纵向滚动，只有 Shift + 滚轮
   或触控板横向滑动，才会横着滚。大多数用户只会上下滚，导致「横向没反应」。

2. 滚动条被隐藏：
   很多项目会全局隐藏滚动条（如
   ::-webkit-scrollbar { display:none }），这让用户完全不知道列表可以横向滚。

3. 内容没真正溢出：
   例如：10 个子项 × 54px = 540px。如果父容器宽度比 540px
   还大（大屏显示），根本不会触发横向滚动。

4. 外层容器样式影响：
   如果外层有
   overflow:hidden、touch-action: pan-y、或轮播图之类组件
   preventDefault() 了事件，也可能导致横向滚动失效。

#4. 解决方案

#4.1 确保横向滚动开启

复制.activity_container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;   /* 横向滚动 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* 移动端惯性 */
}
.activity_item {
  flex: 0 0 auto;     /* 固定宽度，不压缩 */
  width: 100px;
  height: 66px;
}

#4.2 显示横向滚动条

如果全局隐藏了滚动条，可以为这个容器显式开启：

复制.activity_container::-webkit-scrollbar {
  height: 8px;
}
.activity_container::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.3);
  border-radius: 4px;
}

#4.3 鼠标滚轮映射为横向滚动（推荐）

让用户用普通滚轮就能横向滚：

复制onMounted(() => {
  const el = document.querySelector('.activity_container')!
  el.addEventListener('wheel', (e) => {
    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
      el.scrollLeft += e.deltaY
      e.preventDefault()
    }
  }, { passive: false })
})

#4.4 支持拖拽滚动

实现像「按住鼠标左键 → 拖动」一样的体验：

复制let isDown = false, startX = 0, startLeft = 0
el.addEventListener('mousedown', (e) => {
  isDown = true
  startX = e.pageX
  startLeft = el.scrollLeft
})
el.addEventListener('mousemove', (e) => {
  if (!isDown) return
  el.scrollLeft = startLeft - (e.pageX - startX)
})
el.addEventListener('mouseup', () => isDown = false)
el.addEventListener('mouseleave', () => isDown = false)

#4.5 添加左右切换按钮

复制<button @click="el.scrollBy({ left: -300, behavior: 'smooth' })">←</button>
<button @click="el.scrollBy({ left: 300, behavior: 'smooth' })">→</button>

#5. 总结

• 移动端靠触摸手势 → 天然支持横向滚动。
• 桌面端需要保证：
  1. 容器真的溢出；
  2. 没有隐藏滚动条；
  3. 提供合适的交互方式（滚动条、Shift+滚轮、触控板、拖拽或左右按钮）。

最佳实践是：

• 样式上始终保留 overflow-x: auto；
• 显示或美化横向滚动条；
• 额外增加 JS 支持鼠标滚轮横向映射，用户体验最佳。