iFrame stealing focus

Legacy Evolve Announcements
7

If anyone else runs into this issue, I found a fix!

Adding this code above the </body> header in the index.html file disabled the auto-focus on the Storyline iFrame:

<script>

(function() {

    // 1. Physically block the iframe from moving the parent scrollbar

    const blockScroll = (e) => {

        if (window.parent && window.parent !== window) {

            // This prevents the 'focus' event from triggering a scroll jump

            window.scrollTo(0, 0);

        }

    };

 

    // 2. Wrap the focus method to force "preventScroll"

    const originalFocus = HTMLElement.prototype.focus;

    HTMLElement.prototype.focus = function(options) {

        const safeOptions = options || {};

        safeOptions.preventScroll = true;

        originalFocus.call(this, safeOptions);

    };

 

    // 3. Force the focus back to the Evolve header if a jump is detected

    window.addEventListener('load', () => {

        setTimeout(() => {

            if (window.scrollY !== 0) {

                window.scrollTo(0, 0);

            }

        }, 500); // Wait for bootstrapper.min.js to finish its initial jump

    });

})();

</script>
2 Likes