How to scroll two pdf side by side synchronously in html?

Question

I am creating a side by side view in html to compare two pdfs , i tried to use pdfjs to display two pdfs side by side but dropped the ide , currently i have this code :

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

it did display the pdf correctly side by side but there scroll isn't sync.

For scrolling i have used on scroll event and tried to print something in console just to check whether onscoll event is working or not but no luck , also i tried iframe in place of object , but issue remains , is there any way to display pdf side by side and sync there scrolls.?

Any other approach rather than this is also welcome.

may be help - https://stackoverflow.com/questions/18952623/synchronized-scrolling-using-jquery — Lalji Tadhani, May 20 '19 at 12:12
i already tried this , iframe doesn't have scrolling functionality nor did object. — Vaibhav singh, May 20 '19 at 12:21
https://stackoverflow.com/questions/43264078/javascript-how-to-detect-scroll-event-in-iframe/43264259 — imvain2, May 20 '19 at 14:42
@imvain2 i tried, but didnt work with pdf iframe / embed / object — Vaibhav singh, May 20 '19 at 15:02

score 1 · Answer 1 · answered May 21 '19 at 06:54

1

Maybe this could help you:

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

I first used the scroll event, but ended up having a chain reaction that scrolling one would scroll the other and the event would be triggered on the other which, in turn, would trigger the one again, and so on, making both them scroll all the way down. So I used the wheel event to have it working, as I don't have too much time to fix the chain reaction issue at the moment

answered May 21 '19 at 06:54

notrev

665
1
5
16

hey thanks for helping but scrolling one doesn't scrolling another , however i fixed my issue by myself ,once again thanks . – Vaibhav singh May 23 '19 at 13:14
1

@Vaibhavsingh If you solved the issue yourself it is standard practice to post an answer to your own question and then accept it. In this way other readers can access your knowledge and experience with regards to the problem – Reedinationer May 24 '19 at 20:43
@Reedinationer sorry my bad, now i posted the answer , thanks. – Vaibhav singh May 26 '19 at 04:29

score 0 · Accepted Answer · edited Feb 21 '22 at 11:01

I solved my issue with this :

$("#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());
  });
});

I removed the scroll function calling on onScroll of iFrame which doesn't work and added on load function,then i added the scroll function on child of the iFrame and sync the iFrame's child's it.

How to scroll two pdf side by side synchronously in html?

2 Answers2