双滚动条需统一滚动主体：通常禁iframe滚动由body滚，或反之；须设html/body及父容器height:100%、iframe display:block消除基线空白；动态内容需JS监听scrollHeight并加余量；移动端需父容器overflow:auto及viewport适配。
双滚动条本质是 body 和 iframe 同时可滚动，必须明确「谁该负责滚动」——通常只留一个：要么让 iframe 自撑高、禁掉自身滚动条，靠 body 滚；要么禁掉 body 滚动，让 iframe 内部自己滚。直接设 scrolling="no" 或 overflow: hidden 往往会切掉内容或破坏交互，得配合高度计算和布局修正。
iframe 高度没填满导致 body 多出滚动条
常见于写死 height="500" 或 height="100%" 但父容器没设高、或 html/body 缺少 height: 100%。此时 iframe 只占一屏，内容溢出后 body 出现滚动条，iframe 内部又因内容长自带滚动条。
- 确保
html和body都设height: 100%，且无 margin/padding -
iframe设width="100%" height="100%"，同时父容器（如div）也要height: 100% - 若 iframe 内容动态变化（如展开菜单），仅靠
100%不够，需 JS 动态读取contentDocument.body.scrollHeight
iframe 是内联元素，baseline 对齐产生隐藏空白
iframe 默认是 display: inline，和文字基线对齐，下方会留出约 4px 空白，撑开父容器高度，触发多余滚动。这是移动端和 PC 端都容易忽略的渲染细节。
- 给
iframe加style="display: block"最直接有效 - 或设
vertical-align: top，也能消除 baseline 空白 - 父容器设
font-size: 0也行，但会影响内部文字，不推荐
scrolling="no" 后内容被截断
设了 scrolling="no" 却看不到底部内容？说明 iframe 高度不够，不是滚动条的问题，是高度没算准。浏览器不会自动拉伸 iframe 去适配子页面文档高度，尤其当子页 JS 异步加载内容后。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖 onload 里只读一次
document.body.scrollHeight，要监听 DOM 变化或定时检查 - 推荐用
iframe.contentDocument?.documentElement?.scrollHeight，比body.scrollHeight更可靠（尤其子页有doctype时） - 加个 10–20px 余量，避免刚好卡住滚动边界
- resize 事件也要监听，否则窗口缩放后高度失效
移动端 iframe 无法滑动或双滚动条更明显
iOS Safari 对 iframe 内滚动支持弱，默认禁止子 frame 滚动；Android 则可能因 viewport 设置或父容器 overflow 导致嵌套滚动冲突。
- 给 iframe 的直接父容器设
overflow: auto; -webkit-overflow-scrolling: touch - iframe 本身加
style="display: block; width: 100%; height: 100%"，禁用scrolling属性，由父容器接管滚动 - 子页面 HTML 中加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iframe 内宽度可能超限，强制触发横向滚动条
真正难的不是某一行代码，而是得同时控制三层：父页面的布局流、iframe 元素的渲染行为、子页面自身的尺寸与 overflow 策略。任何一个环节漏掉 vertical-align、height 继承、或 scrollHeight 读取时机，双滚动条就回来。
