iframe滚动时父页跳动需同源注入脚本拦截touchmove并preventDefault；动态设高防溢出，用postMessage透传触底事件唤醒父页滚动；iOS卡顿需硬件加速和viewport禁缩放。
iframe 内容滚动时父页面不跳动
直接给 iframe 设置 scrolling="no" 或 overflow: hidden 并不能阻止父页面被拖动，尤其在 iOS Safari 和部分 Android 浏览器中，手指在 iframe 上滑动仍会带动整个页面滚动。根本原因是 iframe 默认不接管 touch 事件的默认行为。
实操建议：
- 给
iframe添加touchstart监听，调用event.preventDefault()—— 但仅此不够，需配合pointer-events: none（禁用后 iframe 内部交互失效，慎用） - 更稳妥做法：在 iframe 加载完成后，向其 contentDocument 注入一段脚本，监听内部
touchmove并阻止冒泡和默认行为 - 必须确保 iframe 与父页面同源，否则无法访问
contentDocument，会触发SecurityError
让 iframe 滚动与父页面视觉连贯（伪无缝）
“无缝”不是指技术上消除边界，而是让用户感知不到滚动中断。常见错误是 iframe 高度写死，导致内部内容溢出或留白，滚动时出现突兀的空白/遮挡。
实操建议：
- 用
iframe.onload+contentDocument.body.scrollHeight动态设置 iframe 高度，避免竖向滚动条干扰视觉流 - 若 iframe 内容高度动态变化（如加载更多），需监听其内部
resize或自定义事件，再回调父页面调整高度 - 为防抖动，高度更新时加
transition: height 0.2s ease-out，但注意 Safari 对 iframe 的 height transition 支持不稳定，可改用transform: scaleY()模拟
iframe 内滚动触底后继续滚动父页面
这是最典型的“断裂感”来源：用户在 iframe 里滚到底了，再往上拉，期望父页面跟上，但实际没反应 —— 因为 iframe 的滚动事件不会自动透传。
实操建议：
- 在 iframe 内注入脚本，监听
window.onscroll，当scrollTop + clientHeight >= scrollHeight - 2（预留 2px 容差）时，发postMessage给父页 - 父页监听
message事件，收到{ type: 'iframe-scrolled-to-bottom' }后，调用window.scrollBy(0, 1)触发一次微滚动，唤醒父页面滚动惯性 - 避免高频触发：用
setTimeout防抖，且只在 iframe 滚动方向为“向下”且接近底部时才透传
移动端 iframe 滚动卡顿与兼容性陷阱
iOS Safari 对 iframe 的 overflow: scroll 支持极差，常表现为滚动迟滞、回弹异常、甚至完全禁用弹性滚动；Android Chrome 虽好些，但嵌套多层 iframe 时仍可能丢 touch 事件。
实操建议：
- 强制启用硬件加速：给 iframe 的 wrapper 元素加
style="transform: translateZ(0); will-change: transform;" - 禁用双击缩放：在 iframe 内页面的
<head>中加<meta name="viewport" content="user-scalable=no">，否则双击可能放大 iframe 区域，破坏布局 - 不要依赖
iframe.contentWindow.scrollTo()做平滑滚动 —— 它在多数移动端无效，改用内部脚本调用element.scrollIntoView({ behavior: 'smooth' })
真正难处理的是跨域 iframe 和 iOS 的 scroll chaining 限制，这时候“无缝”只能退守为视觉对齐和滚动节奏同步，别强求物理连续。
