htmlfullscreenhtml5-fullscreen

IE10+ FullScreen.js is not scrolling in full-screen mode

I develop a website who is using https://github.com/sindresorhus/screenfull.js/ for full-screen mode. On Chrome, Firefox, Open, and Safari the plugin it works properly. But when I go to Internet Explorer 10+ the plugin doesn't work properly. So when I'm in full-screen mode I can not scroll the content even with the keyboard.

I tried to add overflow: scroll !important; overflow-y: scroll !important; to the body but without changes.

Can you please help me? Thank you in advance.

Solution

  • The problem is that you should pass a different element when you are dealing with Internet Explorer. Using the same component that you're using...

    Instead of:

        

if (screenfull.enabled) {

    screenfull.request();

} else {
        // Ignore or do something else
}

    Do this:

    let element = document.documentElement; // Default element for other browsers

if (element.msRequestFullscreen) {
   element = document.body; //overwrite the element (for IE)

}

if (screenfull.enabled) {
    screenfull.request(element);
} else {
    // Ignore or do something else
}