viewport meta 标签必须同时包含 width=device-width 和 initial-scale=1.0，否则局部滚动区域在手机上 touch 事件坐标偏移、“点得中、滑不动”；-webkit-overflow-scrolling: touch 是 ios/android 局部滚动惯性滑动的必需开关，且需配合非 static 定位。
viewport meta 标签必须写对，否则局部滚动区域根本不会响应 touch
局部滚动（比如 .scroll-container { overflow-y: auto; height: 300px; }）在手机上失效，90% 是因为 <meta name="viewport"> 缺失或写错。iOS Safari 和多数 Android WebView 要求 width=device-width 和 initial-scale=1.0 同时存在，缺一不可——否则浏览器按默认 980px 渲染，导致 touchstart 坐标计算错误，滚动区域“点得中、滑不动”。
常见错误包括：
- 只写了
width=device-width，漏掉initial-scale=1.0→ iPhone 上文字极小，滚动区域 touch 事件坐标偏移 - 加了
user-scalable=no却没处理横屏重排 → 横屏后局部容器高度错乱，滚动截断 - 把 viewport 标签放在
<link rel="stylesheet">之后 → 部分 Android WebView 先闪一次默认渲染，再重绘，滚动逻辑初始化失败
-webkit-overflow-scrolling: touch 不是可选项，是 Android/iOS 必开开关
没有它，overflow: auto 在 iOS Safari 和旧版 Android Chrome 中表现为“卡顿滚动”或“完全不惯性滑动”。这个属性虽已被标记为 deprecated，但截至 2026 年，仍是让局部滚动具备原生手感的唯一可靠方式。
正确写法（必须加）：
.scroll-container {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
注意：
- 该样式只对
position: relative、absolute或fixed容器生效；static容器下可能被忽略 - 不能和
transform: translateZ(0)或will-change: transform混用，否则在 iOS 16+ 上触发渲染层分裂，反而卡顿 - 若容器有
border-radius，需额外加overflow: hidden，否则圆角内滚动内容会溢出
滚动条隐藏策略要分平台，iOS 必须放弃自定义滚动条
iOS Safari 完全不支持 ::-webkit-scrollbar，任何针对滚动条的 CSS（如 width、background）都会被静默忽略。强行写只会增加维护成本，且影响可访问性。
推荐做法是统一隐藏 + 保留滚动行为：
- Android：用
::-webkit-scrollbar { display: none; }隐藏原生滚动条 - iOS：靠
overflow: auto+-webkit-overflow-scrolling: touch保证可滑动，视觉上无滚动条是正常表现 - 所有平台都加
scrollbar-width: none（Firefox）和-ms-overflow-style: none（旧 Edge）
如果需要引导用户感知“此处可滚动”，用渐变遮罩或底部阴影更可靠：mask-image: linear-gradient(to bottom, black 80%, transparent 100%)。
局部滚动容器高度不能写死 px，必须用视口单位或 flex 约束
写 height: 300px 在手机上极易出问题：iPhone 15 Pro Max 竖屏可视高度约 932px，300px 还行；但折叠屏展开后或横屏时，300px 可能占满半屏甚至溢出。更麻烦的是，很多安卓厂商系统（如 vivo、华为）会动态调整状态栏/导航栏高度，固定 px 值直接失准。
可行方案：
- 用
max-height: 70vh+overflow-y: auto，确保容器不超过视口 70% - 用 Flex 布局约束：父容器
display: flex; flex-direction: column;，滚动区设flex: 1; min-height: 0;（min-height: 0是关键，防止 flex 项撑高父容器） - 避免
height: 100%—— 它依赖父级高度，而父级若没显式设高，结果是 0
特别注意：iOS 12 及更早版本中，flex: 1 容器里的子元素若同时设了 min-width，会被强制压缩。此时换用 flex: 0 1 auto 更稳妥。
真正难的不是让局部滚动“动起来”，而是让它在各种屏幕尺寸、DPR、系统 UI 变化下始终维持可触达、可预测的高度与交互反馈。viewport 和 -webkit-overflow-scrolling 是地基，其余都是在地基上防震加固。别跳过测试环节——尤其横竖屏切换、双指缩放后，再点一次那个滚动区，看它是否还听使唤。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
