Question

我正在用html创建并排视图以比较两个pdf，我尝试使用pdfjs并排显示两个pdf，但删除了ide，目前我有以下代码：

<div class="row">
        <div class="col-md-6">
            <object data="uploaded\\1.pdf" id="pdf1" onscroll="scroll1();" type="application/pdf" width="100%" height="100%"> 
            </object>
        </div>
       <div class="col-md-6">
            <object data="uploaded\\2.pdf" id="pdf2" onscroll="scroll2();" 
            type="application/pdf" width="100%" height="100%">
            </object>
        </div>
 </div>

它确实可以并排正确显示pdf，但是滚动不同步。

对于滚动，我使用了scroll事件，并尝试在控制台中打印一些内容，只是为了检查onscoll事件是否正常运行，但是没有运气，我也尝试了 iframe 代替对象，但是问题仍然存在，是否有任何方法可以并排显示pdf并在其中同步滚动？？

也欢迎使用除此以外的其他方法。

Answer 1

我通过以下方法解决了我的问题：

<script >


$("#pdf1").on('load', function(){



$("#pdf1").contents().find("#viewerContainer").on('scroll', function(){ 

  $("#pdf2").contents().find("#viewerContainer").scrollTop($(this).scrollTop());





});

});


$("#pdf2").on('load', function(){


$("#pdf2").contents().find("#viewerContainer").on('scroll', function(){ 
 $("#pdf1").contents().find("#viewerContainer").scrollTop($(this).scrollTop());
 });

});

</script>

我删除了不起作用的iFrame onScroll上调用的滚动功能，并在加载功能上添加了功能，然后在iFrame的子代上添加了滚动功能，并同步了iFrame的子代。

Answer 2

也许这可以帮助您：

http://jsfiddle.net/a3mo6tpb/2/

我首先使用了scroll事件，但最终产生了连锁反应，即滚动一个事件将滚动另一个事件，并且该事件将在另一个事件上触发，而该事件又会再次触发一个事件，所以继续，使它们一直向下滚动。因此，我使用wheel事件使其正常运行，因为目前我没有太多时间来解决连锁反应问题

如何在html中同时滚动两个pdf？

2 个答案: