firefox中没有全屏滚动

Question

现代Chrome支持在设置为全屏模式的元素上滚动，但Firefox中的元素并非如此。有人知道在Firefox中滚动的CSS技巧吗？如果元素不适合全屏模式下的屏幕，我尝试了很多类似的方法来滚动元素(在本例中是主体(。

当使用下面的代码时，打开开发工具，使其占据大约75%的屏幕，使全屏元素不适合屏幕。

function enterFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
}
else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}

button {
padding: 40px;
}
div {
padding: 100px;
background-color: red;
}
div div {
background-color: blue;
}
body:fullscreen {
overflow: scroll !important;
}
body:-ms-fullscreen {
overflow: scroll !important;
}
body:-webkit-full-screen {
overflow: scroll !important;
}
body:-moz-full-screen {
overflow: scroll !important;
}

<button onclick="enterFullscreen(document.body);">Enter Fullscreen (BODY)</button>
<div>
<button onclick="enterFullscreen(document.getElementsByTagName('DIV')[0]);"> EnterFullscreen (DIV 0)</button>
<div>
<button onclick="enterFullscreen(document.getElementsByTagName('DIV')[1]);"> EnterFullscreen (DIV 1)</button>
<button onclick="exitFullscreen()">Exit Fullscreen</button>
</div>
</div>

Answer 1

事实证明，无论出于何种原因(可能是一个错误(，如果body元素设置为全屏，即使body高度大于窗口，它也不会启用滚动。Firefox中的任何其他DIV元素都不是这样。一个解决方案是将所有内容都放在一个DIV标记中，并将该DIV标记放在BODY标记中。

<style>
button {
padding: 40px;
}
div {
background-color: red;
}
div div {
height: 200%;
background-color: blue;
}

:fullscreen {
overflow-y: scroll;
}
:-ms-fullscreen {
overflow-y: scroll;
}
:-webkit-full-screen {
overflow-y: scroll;
}
:-moz-full-screen {
overflow-y: scroll;
}
</style>

<div>
<button onclick="enterFullscreen(document.getElementsByTagName('DIV')[0]);">Enter Fullscreen</button>
<button onclick="exitFullscreen()">Exit Fullscreen</button>
<div>
</div>
</div>

<script>
function enterFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
}
else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}

</script>