Как прокрутить два PDF бок о бок синхронно в HTML? - PullRequest
0 голосов
/ 20 мая 2019

Я создаю параллельный вид в 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 правильно, но прокрутка не синхронизирована.

Для прокрутки я использовал событие прокрутки и пытался напечатать что-то в консоли, просто чтобы проверить, работает ли событие onscoll или нет, но не повезло, также я попытался iframe вместо объекта , но проблема остается, есть ли способ отобразить PDF рядом и синхронизировать там прокрутки .?

Любой другой подход, кроме этого, также приветствуется.

Ответы [ 2 ]

1 голос
/ 26 мая 2019

Я решил свою проблему с этим:

<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>

Я удалил функцию прокрутки, вызывающую onScroll из iFrame, которая не работает, и добавил функцию загрузки, затем я добавил функцию прокрутки для дочернего элемента iFrame и синхронизировал дочерний элемент iFrame it.

0 голосов
/ 21 мая 2019

Может быть, это может помочь вам:

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

Сначала я использовал событие scroll, но в итоге получилась цепная реакция, при которой прокрутка одного прокручивает другого, а событие запускается на другом, что, в свою очередь, снова вызывает одно и так далее, и так далее, заставляя их обоих прокручивать полностью вниз. Поэтому я использовал событие wheel, чтобы оно заработало, поскольку у меня не так много времени, чтобы исправить проблему с цепной реакцией в данный момент

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...