Question

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

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

全屏API和滚动功能在Chrome和Firefox中运行良好。当按下F11将IE 11置于全屏模式时，它可以正常工作。

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

Answer 1

如果您希望整个页面全屏，那么解决方案就是发送＆＃34; document.body＆＃34;对于IE11和＆＃34; document.documentElement＆＃34;适用于Chrome和Firefox。功能示例：

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;
}

或更易读的版本＆＃34;正文：-ms-fullscreen {overflow：auto;}＆＃34;

在IE11，Firefox 49，Chrome 56和Chrome Android上测试过。 我没有在Edge上测试此代码。

P.S。 IE11和Chrome的一些额外样式修复

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

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

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

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

有关如何设置全屏样式的更多信息：https://davidwalsh.name/fullscreen

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

1 个答案: