iOS局部滚动需满足三点：-webkit-overflow-scrolling: touch显式设置、容器有明确高度或max-height、内部内容高度超容器；缺一则触控时整页滚动而局部容器不动。
局部滚动容器在 iOS 上不响应 touch 滚动
常见现象是：PC 端鼠标滚轮能正常滚动 .scroll-container，但 iOS Safari 里手指一划就整个页面跟着动，局部容器纹丝不动。根本原因不是 JS 写错了，而是 iOS 对 overflow: auto/scroll 容器的触摸滚动支持有前提条件。
必须同时满足以下三点，iOS 才会启用原生触摸滚动：
-
-webkit-overflow-scrolling: touch必须显式设置（仅限 iOS - 容器不能有
transform、opacity 或 <code>will-change等触发合成层的 CSS 属性（它们会破坏滚动上下文） - 容器父级不能有
overflow: hidden或position: fixed遮罩层截断事件流（尤其常见于弹窗遮罩）
示例修复写法：
.scroll-container {
height: 300px;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* iOS 12–14 必加 */
/* 不要写 transform: translateY(0) 或 will-change: transform */
}
Android WebView 中 touchmove 被吞或滚动卡顿
现象是：手指按住拖动时，容器偶尔“跳一下”或直接停止滚动，touchmove 事件触发次数骤减。这通常是因为浏览器开启了 passive event listener 优化，而你的监听没声明 { passive: false }。
Android Chrome 56+ 和大多数 WebView 默认把 touchmove 当作 passive 事件，一旦你在回调里调用 e.preventDefault()，浏览器会直接忽略并报 Unable to preventDefault inside passive event listener 错误。
正确做法是：
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 绑定时显式传
{ passive: false }：el.addEventListener('touchmove', handler, { passive: false }) - 只在真正需要拦截滚动时才调用
e.preventDefault()（比如你正在实现拖拽排序） - 若只是想让局部容器可滚动，**完全不需要 JS 监听 touchmove**——靠 CSS 就够了
局部滚动与页面级 touch 事件冲突（如轮播图、下拉刷新）
当局部容器和外层都监听 touchstart/touchmove，容易出现“手势打架”：比如在轮播图区域下滑，结果局部容器滚动了，轮播却没响应；或者反过来，轮播吞掉了滚动事件，用户拉不到底部。
关键不是谁先绑定，而是事件流向控制：
- 用
touch-action: pan-y限定容器只允许竖向滚动（对轮播图用pan-x），CSS 层面比 JS 更早生效 - 避免在局部容器上监听
touchmove并调preventDefault()，除非你明确要接管滚动逻辑 - 下拉刷新等全局手势，必须在
document或body上监听，并严格校验document.documentElement.scrollTop === 0，否则会干扰局部滚动
移动端滚动条样式失效或滚动区域错位
给 .scroll-container 加了 ::-webkit-scrollbar 却看不到效果？或者滚动时内容被裁切、位置偏移？大概率是渲染层问题。
两个易忽略点：
- iOS Safari 中，如果容器父元素用了
transform（哪怕只是translateZ(0)），会导致::-webkit-scrollbar伪元素不渲染 - 局部滚动容器内若含
position: sticky元素，在 Android WebView 中可能因滚动锚定异常导致跳动，建议改用position: relative+top动态计算 - 滚动高度计算别依赖
offsetHeight—— 它不含滚动条宽度；用clientHeight更稳妥
滚动兼容性从来不是“写了就能跑”，而是每一步都要考虑 iOS 的合成层限制、Android 的 passive 事件策略、以及 WebView 的碎片化实现。最稳的路径是：优先用纯 CSS 实现滚动，JS 只做增强；任何 touch 事件监听，都先问一句“这个 preventDefault 真的必要吗？”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
