主页 / 问题 / 722059
Accepted
Abmin
Asked:2020-09-23 06:54:09 +0000 UTC2020-09-23 06:54:09 +0000 UTC

在全屏模式下无法在块内滚动

  • 772

由于代码在这里不起作用，您需要查看Codepen。

我用滚动制作了一个块，里面是一个子块。当您按下缩放按钮时，浏览器中的全屏模式会打开，但如果块不适合屏幕（例如，从手机中，当我们的屏幕小于块时），滚动将停止工作。

在此处输入图像描述

$(".zoom").click(function() {
  var conf = $(this).attr("data-status");
  fullScreen(conf)
});

function fullScreen(conf) {
  var docelem = $("#game").get(0);
  if (conf == "true") {
    if (docelem.requestFullscreen) {
      docelem.requestFullscreen();
    } else if (docelem.mozRequestFullScreen) {
      docelem.mozRequestFullScreen();
    } else if (docelem.webkitRequestFullScreen) {
      docelem.webkitRequestFullScreen();
    } else if (docelem.msRequestFullscreen) {
      docelem.msRequestFullscreen();
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }
}

$("#game").get(0).addEventListener("webkitfullscreenchange", onfullscreenchange);
$("#game").get(0).addEventListener("mozfullscreenchange", onfullscreenchange);
$("#game").get(0).addEventListener("fullscreenchange", onfullscreenchange);

function onfullscreenchange() {
  var docelem = $("#game").get(0);
  var conf = $(".zoom").attr("data-status");
  if (conf == "true") {
    if (docelem.requestFullscreen) {
      $(".zoom").attr("data-status", "false");
    } else if (docelem.mozRequestFullScreen) {
      $(".zoom").attr("data-status", "false");
    } else if (docelem.webkitRequestFullScreen) {
      $(".zoom").attr("data-status", "false");
    } else if (docelem.msRequestFullscreen) {
      $(".zoom").attr("data-status", "false");
    }
  } else {
    if (document.exitFullscreen) {
      $(".zoom").attr("data-status", "true");
    } else if (document.webkitExitFullscreen) {
      $(".zoom").attr("data-status", "true");
    } else if (document.mozCancelFullScreen) {
      $(".zoom").attr("data-status", "true");
    } else if (document.msExitFullscreen) {
      $(".zoom").attr("data-status", "true");
    }
  }
}
#game {
  position: relative;
  margin: 0 auto;
  left: 0;
  top: 0;
  overflow: auto;
  z-index: 5;
  background: url(https://americanlibrariesmagazine.org/wp-content/uploads/2016/10/01caldecat.jpg);
  height: 500px;
  width: 500px;
}

.right-block {
  overflow: auto;
  width: 300px;
  height: 300px;
  margin: 30px auto;
  position: relative;
}

.zoom {
  margin: 5px;
  position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="right-block">
  <section id="game">
    <input type="button" class="zoom" value="Zoom" data-status="true">
  </section>
</div>

javascript

1 个回答

  1. Best Answer

    在我看来，它应该像这样工作 - CodePen（好吧，也许你仍然可以玩弄元素的位置）：

    const $docelem = $('.game'),
  docelem = $('.game')[0],
  $gameBg = $docelem.find('.game_bg'),
  $zoomButton = $('.zoom');
let conf = $zoomButton.data('status');

$docelem.on('webkitfullscreenchange mozfullscreenchange fullscreenchange', onfullscreenchange);
$zoomButton.on('click', fullScreen);

function fullScreen() {
  if (conf === true) {
    if      (docelem.webkitRequestFullScreen) docelem.webkitRequestFullScreen();
    else if (docelem.mozRequestFullScreen) docelem.mozRequestFullScreen();
    else if (docelem.msRequestFullscreen) docelem.msRequestFullscreen();
    else if (docelem.requestFullscreen) docelem.requestFullscreen();
  } else {
    if      (document.webkitExitFullscreen) document.webkitExitFullscreen();
    else if (document.mozCancelFullScreen) document.mozCancelFullScreen();
    else if (document.msExitFullscreen) document.msExitFullscreen();
    else if (document.exitFullscreen) document.exitFullscreen();
  }
}

function onfullscreenchange() {
  conf = !(
    conf === true
    && (
      docelem.requestFullscreen
      || docelem.mozRequestFullScreen
      || docelem.webkitRequestFullScreen
      || docelem.msRequestFullscreen
    )
  );

  $docelem.toggleClass('game__full-screen');
  $zoomButton.data('status', conf);
}
    .right-block {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 30px auto;
}

.game {
  position: relative;
  margin: 0 auto;
  left: 0;
  top: 0;
  overflow: auto;
  z-index: 5;
  height: 300px;
  width: 300px;
  overflow: auto;
  -webkit-overflow-scrolling:touch;
}

.game_bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 500px;
  height: 500px;
  font-size: 0;
}

.zoom {
  position: absolute;
  left: 5px;
  top: 5px;
}

.game__full-screen {
  width: 100%;
  height: 100%;
}

.game__full-screen .game_bg-image {
  width: auto;
  height: auto;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="right-block">
  <section class="game">
    <div class="game_bg">
      <img src="https://americanlibrariesmagazine.org/wp-content/uploads/2016/10/01caldecat.jpg" alt="" class="game_bg-image">
    </div>
    <input type="button" class="zoom" value="Zoom" data-status="true">
  </section>
</div>

    • 2

相关问题