在全屏模式下，IE无法滚动 [英] IE cannot scroll while in fullscreen mode

问题描述

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

I have just found out that IE 11 cannot scroll when it is put into fullscreen mode by Fullscreen API.

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

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

Fullscreen API and scrolling works fine in Chrome and Firefox. When IE 11 is put into fullscreen mode by pressing F11 it works fine.

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

I have tried to find documentation about this, but without luck. Has anyone else encountered this problem? Or knows what I might be doing wrong?

推荐答案

如果你想要整个页面全屏，解决方案是发送document.body 适用于Chrome和Firefox的IE11和document.documentElement。函数示例：

if you want the entire page fullscreen the solution is to send "document.body" for IE11 and "document.documentElement" for Chrome and Firefox. function example:

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

and apply this css, because elements scroll (except root) is disabled in fullscreen by default (this is the standard) https://bugzilla.mozilla.org/show_bug.cgi?id=779286#c8

body {
    overflow: auto;
}

或更易读的版本body：-ms-fullscreen {overflow：auto ;}

or a more readable version "body:-ms-fullscreen { overflow: auto;}"

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

Tested on IE11, Firefox 49, Chrome 56 and Chrome Android. I did not tested this code on Edge.

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

P.S. some additional style fixing for IE11 and Chrome

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

In Chrome if you don't have the body white background color some white bars will appear on the margins of the page. to fix this use:

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

在IE11中如果你有一些浮动的元素绝对/固定位于屏幕右侧（例如.right_menu {position：fixed; right：0;}）然后覆盖在滚动条上。解决这个问题你可以使用：

In IE11 if you have some elements floating absolute/fixed positioned to the right side of the screen (example ".right_menu {position: fixed; right: 0;}") then are overlayed over the scrollbar. to fix this you can use:

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

更多关于如何设置全屏样式：< a href =https://davidwalsh.name/fullscreen =nofollow noreferrer> https://davidwalsh.name/fullscreen

more about how to style fullscreen: https://davidwalsh.name/fullscreen

这篇关于在全屏模式下，IE无法滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！