Question

I’ve already noticed that there are many posts dealing with this; but I can’t get out of them anything useful.

I have a html page (which I cannot touch) containing an iframe; this iframe contains a html page I made (which actually contains all the stuff of the page).
What I’d like to do is to detect when the user scrolls to the bottom of the page (i.e., to the bottom of the iframe). So I try the following:

$(document).ready(function() {
    $(window).scroll(function() {
        //...
    });
 });

inside the iframe. But it did not produce any result when I scroll the page, as if no event occurred.
I’ve read many things out there but I’ve not understood how the whole thing works (for example: document refers to the iframe’s container, or to the iframe itself?).

Could anyone explain how to deal with an iframe with jquery? In this case I can only operate inside the iframe itself (if this is something remarkable).

Thanks to anyone who can help!

Answer 1

You should attach the event handler on iframe load or execute the below script from the page which is loaded inside the iframe.

$(window).scroll(function() {
     if($(window).scrollTop() + $(window).height() == $(document).height()) {
         alert("Reached bottom!");
     }
});