matthieua / WOW

Reveal CSS animation as you scroll down a page
https://www.delac.io/WOW/
9.92k stars 4.11k forks source link

WOW inside iframe #285

Open remi-lebigre opened 7 years ago

remi-lebigre commented 7 years ago

Hello,

I would like to use this library into an iframe, but all the wow events trigger at the same time, when the iframe is loaded.

Is there a way to get WOW scroll event inside an iframe?

(WOW js works fine on the iframe src when run in a new tab)

talbotchad commented 7 years ago

Hi There

Has anyone had any luck resolving this? I'm experiencing the same issue

thanks!

remi-lebigre commented 7 years ago

Hello talbotchad,

Here is what I used:


    <script>
        (function ($, w) {

            function resize(e) {
                console.debug('resize iframe', e.contentWindow.document.body.scrollHeight);

                e.width = e.contentWindow.document.body.clientWidth;
                e.height = e.contentWindow.document.body.clientHeight;
            }

            w.resizeIframe = function (e) {
                resize(e);

                window.addEventListener('resize', function () {
                    resize(e);
                });
            };
        })(jQuery, window);
    </script>

Add this function on onload attribute on your iframe:

<iframe onload="resizeIframe(this)" src="http://google.com"></iframe>