如何检测页面嵌入式PDF内的用户滚动行为以显示继续按钮

原有方案失效原因 #

通过<object>标签嵌入的PDF运行在浏览器内置PDF阅读器的独立沙箱上下文中，和父页面的JS上下文隔离。你给外层<object>元素绑定的滚动事件只能监听到元素本身的滚动，无法捕获到PDF内部内容的滚动事件，所以之前的写法都无法生效。

可行解决方案 #

方案1：使用PDF.js渲染PDF（推荐） #

PDF.js是完全运行在父页面JS上下文的PDF渲染工具，所有内容直接渲染在你的页面DOM中，可以直接监听滚动事件，可控性和兼容性最高。

实现代码

HTML部分：

<!-- PDF渲染容器，滚动行为由该容器控制 -->
<div id="pdfContainer" style="width: 60%; height: 60vh; margin: 0 auto; overflow-y: auto;"></div>
<!-- 初始隐藏的继续按钮 -->
<button id="continueBtn" style="display: none;">继续</button>

JS部分：

// 部署PDF.js静态资源到你的服务后，替换为对应worker文件的本地路径
pdfjsLib.GlobalWorkerOptions.workerSrc = '本地部署路径/pdf.worker.min.js';

let pdfHasScrolled = false;
const pdfUrl = 'flgs/EUW/EUW.pdf';
const pdfContainer = document.getElementById('pdfContainer');
const continueBtn = document.getElementById('continueBtn');

// 直接监听容器的滚动事件即可
pdfContainer.addEventListener('scroll', () => {
  if (!pdfHasScrolled) {
    pdfHasScrolled = true;
    continueBtn.style.display = 'block';
  }
});

// PDF渲染逻辑
const renderPdf = async () => {
  const pdfDoc = await pdfjsLib.getDocument(pdfUrl).promise;
  // 逐页渲染PDF到容器中
  for (let pageNum = 1; pageNum <= pdfDoc.numPages; pageNum++) {
    const page = await pdfDoc.getPage(pageNum);
    // 缩放参数可根据需求调整，和你之前的zoom=38匹配即可
    const viewport = page.getViewport({ scale: 1.5 });
    const canvas = document.createElement('canvas');
    const canvasCtx = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    pdfContainer.appendChild(canvas);
    await page.render({
      canvasContext: canvasCtx,
      viewport: viewport
    }).promise;
  }
};
renderPdf();

方案2：透明遮罩层hack（适合不愿引入PDF.js的场景） #

如果你一定要用原生<object>嵌入PDF，可以在PDF上层盖一个同等大小的透明可滚动div，用户滚动时实际触发的是上层div的滚动事件，间接实现检测。
注意：该方案需要提前确定PDF内容的总高度，确保滚动层的滚动距离和PDF内部滚动高度匹配，避免出现错位

实现代码

HTML部分：

<div style="position: relative; width: 60%; height: 60vh; margin: 0 auto;">
  <!-- 上层透明滚动遮罩 -->
  <div id="scrollMask" style="position: absolute; inset: 0; overflow-y: auto; z-index: 10; background: transparent;">
    <!-- 内层div高度设置为PDF实际内容的总高度，比如3页PDF总高2000px就设2000px -->
    <div style="width: 100%; height: 2000px;"></div>
  </div>
  <!-- 底层原生PDF嵌入 -->
  <object 
    data="flgs/EUW/EUW.pdf#zoom=38&toolbar=0&navpanes=0&scrollbar=0&view=fit" 
    type="application/pdf" 
    width="100%" 
    height="100%"
    style="position: absolute; inset: 0; z-index: 1;"
  ></object>
</div>
<button id="continueBtn" style="display: none;">继续</button>

JS部分：

let pdfHasScrolled = false;
document.getElementById('scrollMask').addEventListener('scroll', () => {
  if (!pdfHasScrolled) {
    pdfHasScrolled = true;
    document.getElementById('continueBtn').style.display = 'block';
  }
});

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