2

我使用下面的脚本对页面进行了全屏切换，但是当页面全屏时出现问题，它无法向下滚动。overflow: scroll我尝试为全屏添加 CSS ，但没有任何反应。

我希望有人可以帮助我解决这个问题。谢谢。

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

3 回答 3

5

您的供应商前缀必须在单独的 CSS 规则中（这是关于为什么会这样的讨论）

因此，在您的情况下，正确的 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;
}
于 2018-07-19T17:28:39.567 回答
4

我不知道它是否回答了你的问题，但我为全屏滚动所做的是：

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

不需要额外的 CSS。适用于 chrome 79。希望对您有所帮助！

于 2019-12-12T12:31:52.693 回答
0

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

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

然后requestFullscreen()在包装元素上启动该方法。在 Firefox 82 和 Chrome 86 桌面和移动设备上测试。

于 2020-11-10T20:07:23.370 回答