Question

我使用以下脚本对页面进行了全屏切换，但是全屏页面无法向下滚动时出现问题。我尝试为全屏添加CSS overflow: scroll，但是什么也没发生。

我希望有人可以帮助我。谢谢。

HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link href="styles.css" rel="stylesheet" type="text/css">
      <script src="script.js"></script>
   </head>
   <body>
      <button id="btnScreen"><i class="icon-enlarge"></i></button>
      <div style="height:1000px">Some Text</div>
   </body>
</html>

JavaScript：

var goInFullscreen = function(element) {
  if (element.requestFullscreen)
    element.requestFullscreen();
  else if (element.mozRequestFullScreen)
    element.mozRequestFullScreen();
  else if (element.webkitRequestFullscreen)
    element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
  else if (element.msRequestFullscreen)
    element.msRequestFullscreen();
}

var goOutFullscreen = function() {
  if (document.exitFullscreen)
    document.exitFullscreen();
  else if (document.mozCancelFullScreen)
    document.mozCancelFullScreen();
  else if (document.webkitExitFullscreen)
    document.webkitExitFullscreen();
  else if (document.msExitFullscreen)
    document.msExitFullscreen();
}

var isFullScreenCurrently = function() {
  var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;

  if (full_screen_element === null)
    return false;
  else
    return true;
}

var setBtnScreen = function() {
  $("#btnScreen").on('click', function() {
    if (isFullScreenCurrently()) {
      goOutFullscreen();
      $(this).find('i').removeClass('icon-shrink').addClass('icon-enlarge');
    } else {
      goInFullscreen($("body").get(0));
      $(this).find('i').removeClass('icon-enlarge').addClass('icon-shrink');
    }
  });
}

CSS：

body:fullscreen
body:-ms-fullscreen,
body:-webkit-full-screen,
body:-moz-full-screen {
  overflow: scroll !important;
}

Answer 1

您的供应商前缀必须位于单独的CSS规则中（here's关于其原因的讨论）

因此，在您的情况下，正确的CSS将是：

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;
}

Answer 2

我不知道它是否回答了您的问题，但是我对全屏滚动的操作是：

const elem = document.documentElement;
if (elem.requestFullscreen) {elem.requestFullscreen()}

不需要其他CSS。适用于Chrome 79。希望对您有帮助！

Answer 3

我找到了一种简单的方法：将所有内容包装在一个块容器（即<main>）中，然后设置以下CSS规则：

body {
    margin: 0px;
    height: 100%;
}
main {
   position: fixed;
   width: 100%;
   height: 100%;
   overflow-y: scroll;
}

，然后在包装器元素上启动requestFullscreen()方法。在Firefox 82和Chrome 86台式机和移动设备上进行了测试。

JavaScript全屏无法滚动

3 个答案: