pdf.js 添加页面更改之间的延迟

Question

我正在使用 PDF.js 来呈现我的 PDF。我需要在每个页面更改事件之间创建 10 秒的延迟。我尝试在我的页面上添加下面的事件监听器，但这会在默认页面更改监听器后触发。

document.addEventListener("pagechange", function (e) {
            //my custom code here
});

最好有一些示例代码或伪代码。

Answer 1

如果您想依赖 scrollIntoView，您可以阻止用户滚动页面。

该函数尝试将给定元素滚动到视口中。

/* I did not post the complete implementation here to avoid plain copy       *
 * and paste and to allow for own (and better) implemantations - if          *
 * someone prefers to see the working implementation, I might edit the post. */

使用 scrollIntoView 锁定页面

所以问题是：您希望滚动到哪个元素？ PDF.js 有一个名为 viewer 的元素 - 它有与加载的 PDF 页面一样多的子元素。例如老三拿着PDF的第三页。

下一个问题：您何时将其滚动到视图中？这看起来有点难。我们可以通过运行 getClientRects() 从该元素的 DOMRect 获取该元素的顶部位置。如果顶部大于视口顶部边框，我们将向外滚动。

对于底部，它有些相同：元素的可见部分（关于高度）是它的高度减去隐藏部分（即在视口顶部之外）。如果 height - hiddenPart < heightOfTheViewport，我们在底部向外滚动。

假设一个元素存储在 pc（页面容器）中，将以上两者结合在一起，您将拥有：

function lockToPage() { 
  var rect = pc.getClientRects()[0];
  var offsetNav = vc.offsetTop;
  if (rect.y > offsetNav) { pc.scrollIntoView(true); }
  if (rect.height + rect.y - window.innerHeight < 0) {    pc.scrollIntoView(false); }
}

vc 是视图容器，它又包含所有页面容器 - 它的偏移量被考虑在内，因为（在 PDF.js 中）我们可能有一个可见的导航栏。

此处锁定页面的方式不是很好，因为尝试滚动到该元素之外会使页面振动。

忽略这个故障，我们如何知道要锁定到哪个页面（元素）？好吧，这很简单，因为我们有 PDFViewerApplication.page 页面和 vc.children[pageIndex] 用于我们的页面容器。从那以后我们所要做的就是听 pagechange 来更新当前页面。

下面是我们如何将所有锁定放在一起的方法：

function initLocker() {
  vc = document.getElementById("viewerContainer");
  pc = document.getElementById("page1").offsetParent;
  lockToPage();
  vc.addEventListener("scroll", lockToPage);
}

释放这样的锁将通过从 vc 中删除事件侦听器来执行；但是应该什么时候做呢？嗯，十秒后……换页后？没有。由于有些页面可能需要一定的时间来渲染，我们最好等待页面渲染完成，从而监听pagerendered.

我们要添加的小东西是防止用户跳过页面并防止用户在我们完成设置之前进行交互。

我想现在我们拥有了所需的一切 - 获取我们的 PDF.js 源代码 (viewer.html)，我们可以在另一个 JS 之前添加我们的代码包括以确保我们的事件侦听器将首先附加，请参阅 SO on multiple event listeners

pdf.js 添加页面更改之间的延迟

pdf.js add delay between page change

jquery

pdf

pdf.js

使用 scrollIntoView 锁定页面