iOS设备使用embed标签嵌入PDF时无法滚动问题咨询

iOS全系列设备的WebKit内核（包括Safari、微信内置浏览器、Chrome for iOS等所有iOS端浏览器）对<embed>标签加载PDF的原生支持存在已知兼容缺陷，滚动事件传递、容器层级识别逻辑和桌面端、安卓端差异较大，按以下顺序排查修复即可：

• 第一步：检查embed标签基础属性配置
  确保embed标签设置了明确的固定高度，禁止使用height: auto或者依赖父元素高度继承的height: 100%写法——iOS下这类未明确计算值的高度会直接将PDF渲染为整页长图高度，不会触发滚动逻辑。推荐直接用视口单位设置高度，基础参考写法：

  <embed 
    src="/target-file.pdf" 
    type="application/pdf" 
    width="100%" 
    height="85vh"
  />
  

• 第二步：给父容器添加iOS专属滚动属性
  不要直接给<embed>标签本身加滚动相关样式，要给它的直接父级容器添加以下CSS，强制WebKit内核识别该区域为可滚动交互区：

  .pdf-container {
    width: 100%;
    height: 85vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch; /* 开启iOS原生平滑滚动，解决滚动无响应问题 */
  }
  

  注意：如果父元素设置了overflow: hidden，会直接截断滚动交互，必须改成overflow: auto

• 第三步：排查全局触摸事件拦截逻辑
  很多移动端页面会通过全局监听touchmove事件阻止默认行为的方式，禁用整页橡皮筋效果，这类逻辑会无差别拦截嵌入PDF内部的滚动事件。找到全局触摸事件监听代码，增加事件源判断，放行PDF容器内的触摸事件：

  // 修复前的错误写法：拦截所有touchmove
  // document.addEventListener('touchmove', e => e.preventDefault(), { passive: false })
  
  // 修复后的写法
  document.addEventListener('touchmove', e => {
    if (e.target.closest('.pdf-container')) return
    e.preventDefault()
  }, { passive: false })
  

• 兼容兜底方案
  如果以上三步调整后仍存在滚动卡顿、偶发无法滑动的问题，说明是当前iOS版本对embed标签的底层渲染bug，不要继续硬磕embed：

  • 优先用<iframe>标签直接替换<embed>，两者加载PDF的属性写法几乎一致，iOS对iframe加载PDF的滚动兼容性远好于embed，外层父容器保留上述CSS配置即可
  • 如果对跨端一致性要求高，直接使用前端PDF渲染方案将PDF解析为页面节点渲染，彻底规避原生嵌入控件的所有兼容问题

测试提示：不要用iOS模拟器验证滚动效果，模拟器的事件触发逻辑和真机存在差异，所有调整必须用iOS真机实测验证。

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