局部滚动无惯性是因为 iOS Safari 对非主文档滚动降级处理，需加 -webkit-overflow-scrolling: touch 启用原生惯性，且须满足有明确滚动边界、内容真正溢出、容器未被父级拉伸变形三条件。
为什么局部滚动没惯性，iOS上一松手就停
根本原因是 overflow-y: auto 容器在 iOS Safari 和部分 Android WebView 中默认不启用原生惯性滚动。这不是 bug，而是浏览器对“非主文档滚动”的降级处理——它把局部容器当成了普通块级元素，只做基础滚动，不激活合成器线程的 momentum 管理。
必须显式启用：加 -webkit-overflow-scrolling: touch。这个 CSS 属性会强制让该容器走和 body 同等级的滚动管线，从而获得真正的惯性、回弹、平滑追踪。
- 只对设置了
overflow: auto或scroll的容器生效；设在body或无溢出的元素上无效 - 不能和
transform、opacity等触发层叠上下文的属性共用在同一元素上，否则可能被 iOS 忽略 - 现代 Chrome / Edge 已自动启用惯性，但 iOS Safari（包括微信内置 WebView）仍强依赖此声明
加了 -webkit-overflow-scrolling: touch 还是卡顿或没反应
常见失效不是语法写错，而是布局约束被破坏。浏览器判定“可惯性滚动”需要同时满足三个条件：有明确滚动边界、内容真正溢出、容器未被父级拉伸变形。
- 容器必须有
max-height（推荐）或height，且值要小于内容总高度；仅靠flex: 1或100%不够 - 若容器在
display: flex父级中，必须额外加min-height: 0，否则 Flex 会无视max-height并撑高子项 - 富文本内含
<img>、<table>或长 URL 时，它们会横向撑破容器，导致垂直方向“看似没溢出”，需配max-width: 100%和word-break: break-word
局部滚动惯性太强，松手后滑过头停不准
这是 -webkit-overflow-scrolling: touch 的副作用：它启用了系统级 momentum，但无法通过 CSS 调节强度。想控制停靠精度，只能换策略——放弃纯 CSS 惯性，用 JS 主动接管。
立即学习“前端免费学习笔记（深入）”；
核心思路：监听 wheel 或 touchend，检测滚动速度与剩余距离，用 scrollBy({ behavior: 'smooth' }) 或 requestAnimationFrame 动画收尾，替代原生惯性。
- 不要在
touchmove中调preventDefault()+ 手动scrollTop，这会切断原生管线，帧率暴跌 - 若需吸附对齐（如分页），优先用
scroll-snap-type，它和-webkit-overflow-scrolling: touch兼容，且停靠更稳 - 避免同时设
overflow-x: auto和overflow-y: auto，某些 Android WebView 会禁用惯性
滚动到底部后无法无缝接力到页面滚动
这不是惯性问题，而是浏览器原生行为缺陷：局部容器触底后，不会立即把 wheel 事件移交上级，而是等待约 800ms 才转发。用户会明显感到“卡一下”。
解决方案是 JS 主动拦截并转发：
container.addEventListener('wheel', (e) => {
const isAtBottom = e.deltaY > 0 && container.scrollHeight - container.scrollTop - container.clientHeight < 1;
if (isAtBottom) {
e.preventDefault();
window.scrollBy({ top: e.deltaY });
}
}, { passive: false });
- 必须设
{ passive: false }，否则preventDefault()无效 - 用
< 1判断边界，而非=== 0，规避浮点误差和 subpixel 渲染偏差 - 同样逻辑可用于顶部（
e.deltaY < 0 && container.scrollTop <= 0），实现双向接力
真正难调的从来不是“有没有惯性”，而是“什么时候该有、什么时候该停、谁来决定交接”。局部滚动的惯性表现，本质是 CSS 声明、布局约束、浏览器管线、JS 干预四者共同作用的结果——改其中一项，常要同步动另外三项。
