我用下面的脚本为页面进行了全屏切换，但当页面全屏时，我遇到了问题，无法向下滚动。我尝试为全屏添加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。适用于铬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;
}
我找到了一个简单的方法：将所有内容封装在块容器(即<main>(中，然后设置以下css规则：
body {
margin: 0px;
height: 100%;
}
main {
position: fixed;
width: 100%;
height: 100%;
overflow-y: scroll;
}
然后在包装器元素上启动CCD_ 3方法。在Firefox 82和Chrome 86桌面和手机上进行了测试。