overflow: auto 配合固定高度和 -webkit-overflow-scrolling: touch 是 ios 惯性滚动的必要条件；android 原生 overflow 存在回弹 bug，需用 will-change 或 scrollto 等方式绕过。
overflow: auto 是最直接有效的方案，但必须配合固定高度和 -webkit-overflow-scrolling: touch 才能在 iOS 上获得惯性滚动体验；Android 原生 overflow 滚动存在回弹 bug，需额外处理。
为什么直接加 overflow-y: scroll 在手机上不灵
很多开发者写完 CSS 发现：PC 浏览器里滚动正常，iOS Safari 一卡一卡、没惯性，Android Chrome 则滚到一半突然跳回顶部。这不是代码写错了，而是浏览器对移动端滚动的默认策略不同：
- iOS WebKit 默认禁用原生滚动惯性，除非显式开启
-webkit-overflow-scrolling: touch - Android 4.4+ 原生
overflow滚动在某些机型（尤其旧版 WebView）中会触发“滚动后自动重置 scrollTop”行为 - 未设固定高度的容器，
overflow不生效 —— 浏览器认为“有空间可撑开”，根本不会触发滚动条
height 和 max-height 怎么选
局部滚动区域必须有明确的尺寸约束，否则无法触发溢出。二者区别很实际：
- 用
height: calc(100vh - 120px)更稳妥：比如 header + footer 共占 120px，中间区域就取视口减去这部分，适合 flex 布局下的“头尾固定、中间滚动”场景 - 避免只写
max-height：它只限制上限，内容少时区域会塌缩，导致滚动条消失或误触失效 - 在 iOS 中，若父容器用了
position: fixed或transform，可能干扰子元素的overflow计算，此时优先改用height+flex替代
iOS 惯性滚动必须加这行 CSS
仅靠 overflow-y: auto 无法在 Safari 实现手指松开后继续滑动的效果。必须补上：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
scroll-container {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
注意点：
-
-webkit-overflow-scrolling: touch是私有属性，仅 iOS Safari 和旧版 WKWebView 支持，Chrome for iOS 已弃用该属性但仍兼容 - 该属性一旦启用，会创建一个独立的合成层（compositing layer），可能轻微增加内存占用，但对现代设备影响可忽略
- 如果滚动区域里有
position: absolute子元素，且其 top/left 超出容器范围，惯性滚动可能异常中断 —— 此时建议把绝对定位元素移出滚动容器，或用transform替代top/left
Android 回弹 bug 的绕过方式
当 Android 设备出现“滚动结束自动弹回顶部”时，大概率是系统 WebView 对 overflow 的实现缺陷。不用重写 JS 滚动逻辑，先试这两个轻量修复：
- 给滚动容器加
will-change: transform：触发硬件加速，常能稳定滚动状态 - 在滚动结束后手动锁定一次 scrollTop，例如监听
touchend后执行el.scrollTop = el.scrollTop + 0.1再立刻设回原值（触发重绘） - 更彻底的方案：改用
scroll-behavior: smooth+scrollTo({ behavior: 'smooth' })控制滚动，避开原生 overflow 的底层问题（但失去手指拖拽自由度）
真正麻烦的不是怎么写，而是忘了检查滚动容器的父级是否设置了 overflow: hidden 或 transform —— 这类样式会悄悄截断滚动事件传播链，让一切 overflow 设置归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
