如何检测用户滚动到<embed>元素底部？现有代码失效求助

你的问题出在直接监听标签的scroll事件是无效的——因为浏览器渲染PDF时，会在内部创建独立的文档上下文，真正的滚动容器是这个内部文档的窗口或元素，而不是本身。下面是可行的解决方案：

方法1：监听内部文档窗口的滚动事件（通用方案） #

首先要等加载完成（确保PDF渲染完毕），再获取它内部的文档窗口，在这个窗口上监听scroll事件：

原生JS版本 #

// 获取embed元素
const contractPDF = document.getElementById('contractPDF');

// 等待PDF加载完成
contractPDF.addEventListener('load', function() {
  // 获取内部文档的窗口对象
  const embedWindow = this.contentWindow;
  
  // 监听内部窗口的滚动事件
  embedWindow.addEventListener('scroll', function() {
    // 计算滚动位置
    const scrollTop = embedWindow.scrollY;
    const viewportHeight = embedWindow.innerHeight;
    const totalHeight = embedWindow.document.body.scrollHeight;
    
    // 判断是否到达底部（可以加一点容差，比如>= totalHeight - 10，避免因精度问题误判）
    if (scrollTop + viewportHeight >= totalHeight) {
      alert("已滚动到PDF底部！");
    }
  });
});

jQuery版本 #

$('#contractPDF').on('load', function() {
  const embedWindow = this.contentWindow;
  
  $(embedWindow).on('scroll', function() {
    const scrollTop = this.scrollY;
    const viewportHeight = this.innerHeight;
    const totalHeight = this.document.body.scrollHeight;
    
    if (scrollTop + viewportHeight >= totalHeight) {
      alert("已滚动到PDF底部！");
    }
  });
});

方法2：针对特定浏览器的DOM结构监听（不推荐，兼容性差） #

部分浏览器（比如Chrome）会把PDF渲染在内部的特定DOM元素中（例如#viewerContainer），你也可以直接监听这个元素的滚动事件，但这种方式依赖浏览器的渲染实现，版本更新后可能失效：

contractPDF.addEventListener('load', function() {
  const viewerContainer = this.contentDocument.getElementById('viewerContainer');
  if (viewerContainer) {
    viewerContainer.addEventListener('scroll', function() {
      if (this.scrollTop + this.clientHeight >= this.scrollHeight) {
        alert("已滚动到PDF底部！");
      }
    });
  }
});

注意事项 #

• 同源策略限制：如果你的PDF来自跨域地址，浏览器会阻止你访问<embed>的contentWindow或contentDocument，这种情况下上述方法都会失效。此时建议使用第三方PDF渲染库（如pdf.js）来自行渲染PDF，这样可以完全控制滚动逻辑。
• 加载时机：必须等待<embed>的load事件触发后再绑定滚动监听，否则内部文档还未渲染，无法获取到滚动容器。

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