局部滚动容器需设置overflow-y: auto、-webkit-overflow-scrolling: unset和touch-action: pan-y三行CSS，以确保垂直滚动正常且不阻断页面级overscroll；额外加overscroll-behavior-y: auto可实现滚动到底部后继续触发全局滚动。
局部滚动容器（比如 div 设了 overflow: auto 或 scroll）一旦开始滚动，会“吃掉”用户在它上面的手势，导致页面整体无法响应上拉/下拉——这不是 bug，是浏览器的默认行为。要让局部滚动不劫持全局体验，关键不是禁用它，而是控制它的交互边界和合成层归属。
为什么局部滚动会让页面“卡住”或“不跟手”
常见错误现象：在 iOS Safari 上，手指按住局部滚动区拖动时，松手后页面不回弹；或者滚动到顶部/底部时，本该触发页面级回弹（overscroll），却直接停住。根本原因是：局部容器抢夺了 touch 事件流，且未正确声明其滚动意图，浏览器无法协调两级滚动行为。
- 局部容器没设
touch-action: pan-y，iOS 默认启用touch-action: none（尤其在某些 CSS 框架或重置样式里），直接屏蔽了原生滚动惯性 - 容器用了
-webkit-overflow-scrolling: touch（已废弃），在 iOS 12–14 中会破坏弹性系数，导致松手即停 - 父级元素（如
body或html）设置了overscroll-behavior: contain或none，主动禁用了传播，但没配好子级 fallback
局部滚动容器必须加的 CSS 规则
只靠 HTML 结构或 JS 监听解决不了底层手势分发问题，必须用 CSS 明确告诉浏览器“这个区域怎么滚、能不能传出去”。以下三行是底线配置：
-
overflow-y: auto（或scroll）—— 触发局部滚动能力 -
-webkit-overflow-scrolling: unset—— 彻底移除已废弃属性，避免 iOS 旧版降级 -
touch-action: pan-y—— 允许垂直拖拽，并保留 overscroll 传播能力（iOS / Android Chrome 均支持）
如果希望局部滚动到底部后，继续拖拽能触发页面整体滚动，再加：overscroll-behavior-y: auto（注意不是 contain）。这个值才是默认行为，但很多 reset.css 会全局覆盖成 contain，务必检查 DevTools 的 computed 样式。
立即学习“前端免费学习笔记（深入）”；
JS 层面不要干预 touchmove 的滚动逻辑
有人试图在 touchmove 里调用 preventDefault() 或手动 scrollTop 来“模拟平滑”，这反而会切断浏览器原生滚动管线。真实场景中：
- 局部容器内滚动应完全交由浏览器处理，JS 只监听
scroll事件做状态同步（如吸顶、懒加载） - 禁止在
touchmove回调中修改任何影响布局的样式（top、transform、height等），否则触发强制同步回流，帧率骤降 - 若需“滚动到某位置”，用
element.scrollTo({ behavior: 'smooth' })，而不是手动动画 +scrollTop，后者在局部容器里兼容性极差
嵌套滚动时的合成层陷阱
当局部滚动容器内部还有可滚动子元素（比如 tab 面板里又有个列表），容易出现“滚动冲突”：手指一动，两个容器同时抢位移。这时不能靠 JS 判断方向再 preventDefault，而应从渲染层隔离：
- 给局部滚动容器加
will-change: scroll-position（仅对长期滚动的容器，别滥用） - 确保容器有明确宽高（
height: 300px），否则浏览器无法创建独立合成层，滚动会和父级共用图层，造成抖动 - 避免在该容器内使用
filter、opacity: 0.99、mask等强制新建图层但不稳定 CSS 属性——它们会导致图层频繁重组，滚动卡顿
最常被忽略的一点：局部滚动容器的父元素如果也设了 overflow: hidden 或 position: fixed，可能截断 touch 事件冒泡路径，导致 overscroll 行为彻底失效。检查 DOM 结构层级比调 JS 更有效。
