如何修复真机移动端（触摸设备）上 Kanban 看板的垂直滚动异常问题-js教程-PHP中文网

如何修复真机移动端（触摸设备）上 Kanban 看板的垂直滚动异常问题

本文提供一套纯 css 方案，解决移动端 kanban 看板在启用横向 scroll-snap 时导致的纵向滚动跳动、卡顿或失效问题，确保列内内容可平滑垂直滚动，同时保持横向列切换的精准吸附效果。

本文提供一套纯 css 方案，解决移动端 kanban 看板在启用横向 scroll-snap 时导致的纵向滚动跳动、卡顿或失效问题，确保列内内容可平滑垂直滚动，同时保持横向列切换的精准吸附效果。

在构建响应式 Kanban 看板时，一个常见需求是：桌面端多列并排显示，移动端单列轮播（横向滑动），且每列内部支持独立、流畅的垂直滚动——类似 Trello 原生 App 的体验。但实践中，许多开发者发现：一旦为 .app-board-columns 容器设置了 scroll-snap-type: x mandatory，移动端（尤其是 iOS Safari 和部分 Android 浏览器）会出现垂直滚动“失灵”或“全局跳动”的现象——手指上下滑动时，整个看板意外横向偏移，或列内内容无法响应纵向手势。

根本原因在于：移动端浏览器对嵌套滚动（尤其是 scroll-snap-type: x + 子元素 overflow-y: scroll）的事件分发存在兼容性缺陷。当父容器启用了强制横向吸附，其 touchmove 事件可能劫持并抑制子容器的纵向滚动意图，尤其在 overscroll-behavior-x: contain 未被充分支持或与其他属性冲突时。

✅ 正确解法不是放弃 scroll-snap，而是严格隔离滚动轴向责任：

父容器（.app-board-columns）只负责横向滚动与吸附，完全禁用纵向滚动；
每列（.app-board-column）自身承担纵向滚动职责，通过嵌套的 .app-board-column-inner-scroll 实现；
关键：用 height: -webkit-fill-available 配合 overflow-y: hidden 锁定父容器高度，避免因高度塌陷或动态计算误差引发滚动干扰。

以下是经实测有效的核心 CSS 修复方案（适配 iOS 15+ / Android Chrome）：

/* 确保根容器撑满视口，消除 body 默认 margin */
body {
  height: 100vh;
  margin: 0;
}

/* 父容器：仅横向滚动，禁止纵向溢出 */
.app-board-columns {
  list-style: none;
  padding: 0 0 8px;
  display: flex;
  flex-flow: row;
  align-items: flex-start;
  margin: 0;

  /* 关键：固定高度，填满可用视口空间 */
  height: -webkit-fill-available; /* iOS Safari 专属 */
  height: fill-available;          /* 标准语法（逐步支持） */
  min-height: 5rem;

  /* 彻底禁用纵向滚动，防止事件冒泡干扰 */
  overflow-y: hidden;

  /* 保留原有横向吸附逻辑 */
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* 每列：设置明确尺寸与盒模型 */
.app-board-column {
  width: 260px;
  max-width: 260px;
  flex: 0 0 auto; /* 禁止弹性拉伸，保障 snap 对齐 */
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  scroll-snap-align: center;
}

/* 列内滚动容器：唯一允许纵向滚动的节点 */
.app-board-column-inner-scroll {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto; /* 推荐使用 auto 而非 scroll，避免滚动条常驻 */
  -webkit-overflow-scrolling: touch; /* 启用 iOS 惯性滚动 */
}

/* 内容区：使用 flex: 1 占满可用空间，确保滚动范围准确 */
.app-board-column-inner {
  padding: 20px 0 60px 15px;
  min-height: 150px;
  flex: 1 0 auto; /* 关键：允许收缩，但优先占满 */
}

⚠️ 重要注意事项：

勿在 .app-board-columns 上设置 height: 100% 或 min-height: 100vh：这在移动端易因地址栏显示/隐藏导致高度抖动，触发滚动错乱；-webkit-fill-available 是更可靠的视口高度锚点。
移除所有可能影响滚动链路的 transform（如 translateZ(0)）：虽可触发硬件加速，但在某些 iOS 版本中会破坏 overscroll-behavior 行为，建议仅在必要时添加，并测试验证。
overscroll-behavior-x: contain 必须作用于 .app-board-columns：防止横向滚动到底部时触发页面回弹（rubber-band），干扰列内纵向操作。
测试真机环境：务必在 iOS（Safari）、Android（Chrome）真机上验证，模拟器无法复现全部触摸事件行为。