CODEWITHSUNDEEP
javascripthtml5-fullscreen
Zhamry D. Jones
Zhamry D. Jones

Reputation: 71

JavaScript fullscreen cannot scroll

I made a fullscreen toggle for a page with the script below, but I have a problem when the page fullscreen, it can't scroll down. I tried adding CSS overflow: scroll for fullscreen but nothing happened.

I hope somebody can help me with this. Thanks.

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

Upvotes: 6

Views: 6652

Answers (3)

drmad
drmad

Reputation: 620

I found an easy way: wrap everything inside a block container (i.e. <main>), then set these css rules:

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

and then fire up the requestFullscreen() method on the wrapper element. Tested on Firefox 82 and Chrome 86 desktop and mobile.

Upvotes: 0

Chen Peleg
Chen Peleg

Reputation: 2034

I don't know if it answers your question but what I do for a fullscreen scroll is:

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

No additional CSS required. Works on chrome 79. Hope it helps!

Upvotes: 9

mpallansch
mpallansch

Reputation: 1194

Your vendor prefixes must be in separate CSS rules (here's a discussion on why that is)

So in your case, the correct CSS would be:

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

Upvotes: 8

Related Questions