如何隐藏iframe内容窗口滚动条，使用父窗口滚动条替代？

核心思路 #

要实现iframe无滚动条、父容器接管滚动，关键是让iframe高度由内部内容决定（而非固定100%），同时隐藏iframe内部的滚动机制，调整内容宽度适配iframe的左右padding。

1. 调整父容器与iframe样式 #

父容器样式修改

移除垂直居中属性（避免滚动区域异常），保留核心配置：

height: "584px",
display: "flex",
flexDirection: "column",
overflow: "auto"

iframe样式修改

将固定高度改为自适应内容，添加滚动隐藏属性：

/* styles.iframe */
height: auto;
width: 100%;
border: none;
padding: 0 100px;
overflow: hidden;

2. 完善HTML加载逻辑，控制内部文档样式 #

在写入HTML后，强制设置iframe内部文档的样式，确保无滚动、宽度适配：

const writeHtml = () => {
  const { html } = this.props;
  const win = this.iframeRef.current?.contentWindow;
  if (!win) return;

  const doc = win.document;
  doc.open();
  // 先注入全局样式，确保内容适配
  doc.write(`
    <style>
      * { box-sizing: border-box; max-width: 100%; }
      html, body {
        overflow: hidden;
        margin: 0;
        width: calc(100% - 200px);
      }
    </style>
  `);
  doc.write(_.unescape(html));
  doc.close();

  // 文档加载完成后，同步iframe高度到内容高度
  win.onload = () => {
    if (this.iframeRef.current) {
      this.iframeRef.current.style.height = `${doc.body.scrollHeight}px`;
    }
  };
};

3. 更新iframe组件属性 #

添加scrolling="no"属性彻底禁用iframe自身滚动：

<iframe
  className={styles.iframe}
  ref={this.iframeRef}
  scrolling="no"
  style={{
    display: loading ? "none" : "block"
  }}
/>

关键说明 #

• 若API返回的HTML包含固定宽度元素，全局样式中的max-width: 100%会强制元素自适应容器宽度，避免横向溢出。
• 同步iframe高度到内容高度是核心：只有让iframe高度完全包裹内容，父容器的overflow: auto才会正确触发滚动。

内容的提问来源于stack exchange，提问作者jack_sparrow_123