Zha*_*nes 5 javascript html5-fullscreen
我使用下面的脚本对页面进行了全屏切换，但是当页面全屏时出现问题，它无法向下滚动。我尝试添加 CSSoverflow: scroll以实现全屏显示，但没有任何反应。
我希望有人能帮助我解决这个问题。谢谢。
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;
}
我不知道它是否回答了您的问题，但我对全屏滚动所做的是：
const elem = document.documentElement;
if (elem.requestFullscreen) {elem.requestFullscreen()}
不需要额外的 CSS。适用于 chrome 79。希望有帮助！
您的供应商前缀必须位于单独的 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;
}
| 归档时间： |
|
| 查看次数： |
5808 次 |
| 最近记录： |