Solution 1 :

This seems to work for me:

  .addEventListener('load', e => {'scroll', e => {

Problem :

I’m having a hard time on this one, and although many people on the internet seem to have the same problem, no solution online has worked for me.

I have the following html code:

<iframe id="documentIFrame" src='http://localhost:49551//Documents/System/ef4be80c-a8d8-482e-9792-50c5692aa07f.pdf' width='100%' height='100%' frameborder='0'></iframe>

And then this is the following js code I’ve tried:


$("#documentIFrame").on('load', function () {
                var iframe = document.getElementById('documentIFrame');
                iframe.contentDocument.addEventListener('scroll', function (event) {
                }, false);

This shows no result, it will not even enter the function.


            var iframe = $("#documentIFrame").contentWindow;
            $(iframe).scroll(function () {
                console.log("NOW SCROLLING...");
                if ($(iframe).scrollTop() == $(iframe).height() - $("#documentIFrame").height()) {
                    alert("Reached bottom!");

Same as before, no result at all.


                var iframe = document.getElementById("documentIFrame").contentWindow;

                iframe.onscroll = function () {

Same, no result.

EDIT: Some extra info on this one, in this case, if I console.log() the iframe AFTER I assign the function to the onscroll event, and I search within the iframe, the onscroll event appears as null.

EDIT 2: This may come in handy for some of you, using jQuery to select the .contentWindow doesn’t work for me, it comes as undefined, but if I use the plain JS code:


… then it returns the element just fine.

I have also tried .contents() and contentDocument instead of contentWindow, and the result is the same; if I try to console.log() those elements, they always come undefined.

I’ve tried setting the scrolling function on the document.ready() and also on a function I call on a onclick event triggered by a different component; always is the same result.

I’ve read something about same origin policy, but I don’t think that should be it, as this document (the one in the src of the iframe) comes from the localhost, that should pass as “same origin”, correct?

Any help would be greatly appreciated.


Comment posted by Jacob

Does the iframe document come from the same origin as the host document? The hostname, port, and protocol must be the same. If not, then you’re going to be severely limited in what you can do.

Comment posted by waching

@Jacob the document is uploaded by the user, but then I copy it inside a temp folder within the solution folder itself, in fact, if I run the project and inspect the iframe element, if I click the link in the src, the file will download, so I think it is within the hostname, but I may be misunderstanding how SO works.

Comment posted by Jacob

When I say “document” I mean the HTML document. Do the outer and inner URLs share the same origin? Sounds like they do, but just want to make sure it’s not something silly like a different port number.

Comment posted by waching

@Jacob oh gotcha! Yes, they do share the same origin.

Comment posted by waching

I just gave it a try.Not working for me. I tried this: document.querySelector(‘#documentIFrame’) .addEventListener(‘load’, e => {‘scroll’, e => { console.log(‘scrollin’); }); }); And it reaches the “ABOUT TO SCROLL” log, but nothing happens after…

Comment posted by waching

Also, this only happens for me if I add this code in the $(document).ready(…) function, if I put it in another function, the “ABOUT TO SCROLL” log won’t show up.

Comment posted by Jacob

Where is

Comment posted by Jacob

Oh, y’know I just noticed that your document is a PDF; I don’t think you can watch the scrolling of a PDF viewer, only of another HTML document. Basically, the iframe window isn’t what’s scrolling, it’s the PDF viewer that’s scrolling.

Comment posted by…

Oooooooh that makes sense.. Yeah, that could definitely be it. I’ll be checking


Leave a Reply

Your email address will not be published. Required fields are marked *