同时滚动三个包含 PDF 文件的 iFrame

Question

我的 html 中有三个 iFrame，每个都包含 PDF 文件。我需要能够同步 iframe 上的滚动条，以便左侧的两个较小的 iframe（#ifr2、#ifr3）以第一个 iframe（#ifr1）的一半速率滚动。并且第一个 iframe (#ifr1) 的滚动速度是其他两个 iframe (#ifr2, #ifr3) 的两倍。这些滚动事件应该在用户滚动任何 iframe 时发生，以便它们始终保持同步。

这是我的html：

    <iframe id='ifr1' width='400' height='600' src='pdf1.pdf'></iframe>
    <iframe id='ifr2' class='trans' width='400' height='300' src='pdf2.pdf'></iframe>
<iframe id='ifr3' class='trans' width='400' height='300' src='pdf3.pdf'></iframe>

目前我正在尝试通过 jQuery 函数执行此操作，这是我的代码：

$(document).ready(function(e) {
$("#ifr1").ready( function() {
   $("#ifr1").contents().scrollTop($("#ifr2").contents().scrollTop());
   $("#ifr1").contents().scrollTop($("#ifr3").contents().scrollTop());
});

$("#ifr2").ready( function() {
   $("#ifr2").contents().scrollTop($("#ifr1").contents().scrollTop());
   $("#ifr2").contents().scrollTop($("#ifr3").contents().scrollTop());
});

$("#ifr3").ready( function() {
   $("#ifr3").contents().scrollTop($("#ifr2").contents().scrollTop());
   $("#ifr3").contents().scrollTop($("#ifr1").contents().scrollTop());
});
});

Answer 1

我猜下面的代码可以解决问题。

$(document).ready( function() {
   $("#ifr1,#ifr2,#ifr3 ").scroll( function() {
     $("#ifr1").contents().scrollTop($(this).scrollTop())
   });
});

您需要将此代码放在具有三个 iframe 的主页中。