Detect if a user scrolls to the bottom of an embedded pdf

Question

I've been working on getting a 'continue' button to show when a user has scrolled to the bottom of a PDF file embedded on the page. So far I've read through several threads that are basically saying that there's no real way to determine the bottom position of a pdf that's been embedded using embed/object tags.

I've tried to build a pretty simple script to log in the console when the user has reached the bottom of the document, but this doesn't seem to do anything.

$(function () {
        $('#contractPDF').bind('scroll', function(e) {
                if($(this).scrollTop() + $(this).innerHeight()>=$(this)[0].scrollHeight)
            {
                console.log('End of document');
            }
        });

The #contractPDF is in a container as such:

<embed id="contractPDF" class="pdf" width="800" height="600" src="/images/example.pdf" type="application/pdf"></embed>

Does anyone have a better solution, or should I be looking at using something like pdf.js?

Answer 1

Embed

When you use embed to display PDF of course you have no control over what's state of browsing the document. You only can set initial values like page or zoom, full list see here Parameters for Opening PDF Files. All the rendering is being handled by the PDF plugin in the browser.

PDF.js

If you plan to your PDF.js then you can use PDF viewer by PDF.js team it's very well optimized and highly customizable. Also for very basic custom viewer using PDF.js can be found here.