IE 在全屏模式下无法滚动答案

【问题标题】：IE cannot scroll while in fullscreen modeIE 在全屏模式下无法滚动
【发布时间】：2017-06-11 18:00:15
【问题描述】：

我刚刚发现 IE 11 通过 Fullscreen API 进入全屏模式时无法滚动。

if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
}

全屏 API 和滚动在 Chrome 和 Firefox 中运行良好。当 IE 11 通过按 F11 进入全屏模式时，它可以正常工作。

我试图找到有关此的文档，但没有运气。有没有其他人遇到过这个问题？或者知道我可能做错了什么？

【问题讨论】：

我也有同样的问题：stackoverflow.com/questions/33562396/…

标签： javascript internet-explorer fullscreen internet-explorer-11

【解决方案1】：

如果您希望整个页面全屏显示，解决方案是为 IE11 发送“document.body”，为 Chrome 和 Firefox 发送“document.documentElement”。函数示例：

function goFullScreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    }
    else if (element.msRequestFullscreen) {
        if (element === document.documentElement) { //check element
            element = document.body; //overwrite the element (for IE)
        }
        element.msRequestFullscreen();
    }
    else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    }
    else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
    else {
        return; //if none are supported do not show message
    }
    //show user message (or something else)
}
var entire_page = document.documentElement; //entire page (for Chrome/FF)
goFullScreen(entire_page);

并应用这个css，因为元素滚动（除了root）在全屏默认情况下被禁用（这是标准） https://bugzilla.mozilla.org/show_bug.cgi?id=779286#c8

body {
    overflow: auto;
}

或者更易读的版本“body:-ms-fullscreen { overflow: auto;}”

在 IE11、Firefox 49、Chrome 56 和 Chrome Android 上测试。 我没有在 Edge 上测试过这段代码。

附： IE11 和 Chrome 的一些额外样式修复

在 Chrome 中，如果您没有正文白色背景颜色，则页面边缘会出现一些白条。解决这个问题：

:-webkit-full-screen {
    background-color: somecolor; /* same color as body */
}

在 IE11 中，如果您有一些浮动绝对/固定的元素位于屏幕右侧（例如“.right_menu {position: fixed; right: 0;}”），则将覆盖在滚动条上。要解决此问题，您可以使用：

:-ms-fullscreen .right_menu {
    margin-right: 17px; /* width of IE scrollbar */
}

更多关于如何设置全屏样式：https://davidwalsh.name/fullscreen

【讨论】：

像魅力一样工作！谢谢