获取IFrame内PDF滚动位置失败，寻求有效技术解决方案

问题根源 #

浏览器内置的PDF阅读器（如Chrome、Edge默认阅读器）会将PDF渲染在独立的内部容器中，而非直接复用iframe的documentElement，因此监听iframeDoc的scroll事件根本不会触发，自然无法获取滚动位置。

可行解决方案 #

方案1：监听IFrame窗口的scroll事件（部分浏览器适配） #

直接绑定iframe的contentWindow滚动事件，而非document对象：

const iframe = document.getElementById('iframe');

iframe.onload = function() {
  console.log("IFrame Loaded");
  const iframeWindow = iframe.contentWindow;
  iframeWindow.addEventListener('scroll', function() {
    console.log("Scrolling Started");
    // 获取滚动位置
    console.log(iframeWindow.scrollY || iframeWindow.pageYOffset);
  });
};

方案2：轮询定位PDF滚动容器（通用兼容） #

不同浏览器的PDF阅读器内部DOM结构存在差异，需轮询找到实际承载PDF的滚动容器，再监听其滚动事件：

const iframe = document.getElementById('iframe');

iframe.onload = function() {
  console.log("IFrame Loaded");
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  
  // 轮询查找滚动容器，适配不同浏览器的DOM结构
  const pollTimer = setInterval(() => {
    const scrollContainer = iframeDoc.querySelector('#viewerContainer') || 
                           iframeDoc.querySelector('.pdfViewer') ||
                           iframeDoc.documentElement;
    
    if (scrollContainer) {
      clearInterval(pollTimer);
      scrollContainer.addEventListener('scroll', () => {
        console.log("Scrolling Started");
        console.log(scrollContainer.scrollTop);
      });
    }
  }, 100);
};

方案3：使用PDF.js替代内置阅读器（最稳定） #

若需要稳定的滚动位置获取能力，推荐使用Mozilla的PDF.js库直接渲染PDF，完全控制渲染流程与事件监听：

// 需先引入PDF.js库，以下为iframe内部示例代码
pdfjsLib.getDocument('your-pdf-file.pdf').promise.then(pdf => {
  const viewer = document.getElementById('pdf-viewer');
  // 编写PDF渲染逻辑...
  
  // 直接监听渲染容器的滚动事件
  viewer.addEventListener('scroll', () => {
    console.log(viewer.scrollTop);
  });
});

关键注意事项 #

• 跨域限制：如果iframe加载的PDF与主页面不同域，浏览器同源策略会阻止访问iframe内部元素与事件，需将PDF部署到同域，或使用PDF.js在同域渲染解决。
• 浏览器差异：不同浏览器的PDF阅读器DOM结构不同，方案2中的选择器需根据目标浏览器调整。

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