Check if user scrolls down through the iframe to the end

Question

I've got just a basic iframe, ind the middle of my page which looks like this:

<iframe class="iframe" src="http://route-to.page"></iframe>

When a user srolls down to this iframe, it will get extra css class, which will make the iframe full screen, with the following css style:

position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;

Now to the point: When a user scrolls down through this full screen iframe all the way to the bottom, it should remove the full screen css class from the iframe. This way, the user can continue scrolling through the rest of my page.

I'm guessing it's the opposite of what you're doing to detect the top of the iFrame ? — adeneo, Jul 15 '14 at 16:18
Providing your current code for detecting the top of the iframe may help someone give you a better solution. — CharliePrynn, Jul 15 '14 at 16:21
possible duplicate of [iframe reaches bottom of page](http://stackoverflow.com/questions/13146793/iframe-reaches-bottom-of-page) — etr, Jul 15 '14 at 16:26

score 0 · Answer 1 · answered Jul 15 '14 at 16:23

0

$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
//do something
}
});

answered Jul 15 '14 at 16:23

etr

1,252
2
8
15

score 0 · Answer 2 · answered Jul 19 '19 at 04:52

$(function () {
$("#iframeid").load(function () {
    var iframe = document.getElementById("iframeid").contentWindow;
    $(iframe).scroll(function () {
        if (   $(iframe).scrollTop()==$(iframe).height()-$("#iframeid").height()) {
            alert("Reached bottom!");             
        }
    });
});
})

Check if user scrolls down through the iframe to the end

2 Answers2

Linked