本文提供一套纯 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）真机上验证，模拟器无法复现全部触摸事件行为。
最终效果：用户在移动端左右滑动切换列（吸附精准），上下滑动任一列时，仅该列内容平滑滚动，无跳转、无卡顿、无全局偏移——完美复刻 Trello 原生体验。此方案零 JS 依赖，纯 CSS 驱动，轻量、可靠、可维护性强。
