全屏，Firefox中无滚动

编程问答 2022-06-09

问题描述

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

firefoxfullscreenhtmljavascript