iPad Safari中嵌入iframe的PDF无法滚动问题求助

我之前也踩过iPad Safari这个兼容性坑，浏览器内置的PDF查看器在iframe里的滚动行为确实有点“顽固”。结合你的代码，给你几个可行的解决方案：

方案一：优化容器与iframe的CSS布局 #

Safari对滚动容器的高度和定位属性敏感度很高，确保容器有明确高度且滚动属性能正确传递到内部：

.docviewer-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  height: 100vh; /* 强制容器占满整个视口高度 */
  position: relative;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

iframe {
  height: 100%;
  width: 100%;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
}

这个调整能让容器的滚动区域被浏览器正确识别，同时确保iframe完全适配容器尺寸。

方案二：添加Safari兼容的滚动属性 #

虽然HTML5规范不推荐使用scrolling属性，但Safari对这个旧属性的支持依然有效，可以尝试给iframe加上：

<div class="container docviewer-wrapper">
  <iframe id="docvieweriframe" src="http://www.pdf995.com/samples/pdf.pdf" scrolling="yes"></iframe>
</div>

它能强制Safari开启iframe内部的滚动功能，和容器的滚动属性配合使用大概率能解决问题。

方案三：改用PDF.js渲染PDF（终极兼容方案） #

如果上面的方法都无效，建议放弃依赖浏览器内置PDF查看器，改用PDF.js来渲染PDF。这个由Mozilla维护的库能在所有现代浏览器（包括iPad Safari）中提供一致的滚动和交互体验：

1. 先引入PDF.js的核心库（建议本地部署，避免跨域问题）
2. 用Canvas替代iframe来渲染PDF，示例代码：

<div class="docviewer-wrapper" style="-webkit-overflow-scrolling: touch; overflow-y: scroll; height: 100vh;">
  <div id="pdfContainer"></div>
</div>

<script>
  // 初始化PDF.js
  const pdfUrl = 'http://www.pdf995.com/samples/pdf.pdf';
  pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
    // 循环加载所有页面
    for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
      pdf.getPage(pageNum).then(page => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const viewport = page.getViewport({ scale: 1.2 });
        
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        canvas.style.marginBottom = '10px';
        
        const renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        
        page.render(renderContext);
        document.getElementById('pdfContainer').appendChild(canvas);
      });
    }
  });
</script>

这种方式完全由代码控制PDF的渲染和滚动，彻底规避浏览器内置查看器的兼容性问题。

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