Не работает прокрутка внутри блока при Fullscreen режиме

192

24 сентября 2017, 00:43

Так как здесь код не будет работать, нужно смотреть на Codepen.

Делаю блок с прокруткой, внутри него дочерний блок. При нажатии на кнопку Zoom включается режим Fullscreen в браузере, но если блок не влазит в экран (например с телефона, когда наш экран меньше блока), то перестаёт работать прокрутка.

$(".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>

Answer 1

В моем представлении должно работать как-то так - КодеПен (ну может там с позицией элементов можно ещё поиграться):

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>