全屏，Firefox中无滚动

问题描述

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

在下面使用此代码时，请打开开发工具，使其占据屏幕的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>

解决方法

由于body元素设置为全屏，无论出于何种原因（可能是错误），都将Firefox禁用，即使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>