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