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的主页面中。

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

1 个答案: