IE无法在全屏模式下滚动。

Question

我刚刚发现，当使用全屏API将IE 11置于全屏模式时，无法进行滚动。

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

Fullscreen API和滚动在Chrome和Firefox中表现良好。当通过按F11将IE 11置于全屏模式时，它也可以正常工作。

我尝试过查找关于这个问题的文档，但没有成功。还有其他人遇到这个问题吗？或者知道我可能做错了什么吗？

- KMK

---

我有同样的问题：https://dev59.com/G5Dea4cB1Zd3GeqPg9So?lq=1 - Fidel90

Answer 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，因为除了根元素外，在全屏模式下滚动元素默认是被禁用的（这是标准）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上测试过这个代码。

---

P.S. 为了修复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

- crisc2000