火狐全屏不滚动答案

【问题标题】：fullscreen no scrolling in firefox火狐全屏不滚动
【发布时间】：2020-10-12 04:07:27
【问题描述】：

现代 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>

【问题讨论】：

标签： javascript html css firefox fullscreen

【解决方案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>

【讨论】：