fullPage.js 2.4.3 not working with iframes inside container

[IvoPereira]

Hello,

I am afraid fullPage.js is not handling well scrolling inside iframes, and therefore misleading the user scrolling intention too, not leading to another slide when the user reaches the bottom of an iframe that totally fills a page.

You can check this issue here: http://jsfiddle.net/u6dfar7j/1/

If you scroll down to the second page, you will see that you have an iframe. Once you reach the end of the iframe, fullPage.js next slide is not called.

Any suggestions?

Thanks!

[alvarotrigo]

Fullpage.js doesn't deal with those cases. You would have to do it by your own.
You probably want to detect with jQuery when a user reaches the top or the bottom of your iFrame and then use the functions moveSectionUp or moveSectionDown that fullPage.js provides.

In order to detect the reach of the bottom or top of your iframe, you would need to have some knowledged of jQuery or javascript.

If you don't, then you should ask in other places such as stackoverflow.com where they will help you much better with it.

This forum is just to treat topics about fullPage.js not about HTML,CSS, javascript or jQuery.

[IvoPereira]

Thanks for answering @alvarotrigo.

That would be a good way to handle it, and possibly and I will be doing.

However, this could be used as a possible improvement for fullPage.js, something like a property that user fills with an element, that keeps listenning to when visitor reaches the bottom of it it does slide to the next page.

Thanks!

[alvarotrigo]

However, this could be used as a possible improvement for fullPage.js, something like a property that user fills with an element, that keeps listenning to when visitor reaches the bottom of it it does slide to the next page.

Sounds like a very specific task that shouldn't be included in fullPage.js
We don't want to add any possible usage in fullPage.js or otherwise fullPage.js would become heavy.

If you take a look inside fullPage.js you probably could use this function for it:

        /**
        * Return a boolean depending on whether the scrollable element is at the end or at the start of the scrolling
        * depending on the given type.
        */
        function isScrolled(type, scrollable){
            if(type === 'top'){
                return !scrollable.scrollTop();
            }else if(type === 'bottom'){
                return scrollable.scrollTop() + 1 + scrollable.innerHeight() >= scrollable[0].scrollHeight;
            }
        }

[faustoct1]

you can try smth like this before your iframe :

<div style="z-index:1000;position:absolute;rgba(0, 0, 0,1);height:100%;width:100%" class="hidden-md hidden-lg"></div>
   <iframe width="100%" height="90%" src="//www.youtube.com/embed/video_id?rel=0" frameborder="0" allowfullscreen></iframe>

this works fine to me. I use it to fix a mobile scroll problem over iframe