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的第三页。

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

对于底部，它有些相同：元素的可视部分（关于高度）是它的高度减去隐藏部分（在视口的顶部之外）。如果height - hiddenPart＆lt; 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在页面更改之间添加延迟

1 个答案:

使用scrollIntoView锁定页面