javascript 在全屏上删除垂直滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6385440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove vertical scrollbar on fullscreen?
提问by obinoob
I want to remove vertical scrollbar after switch to fullscreen.
我想在切换到全屏后删除垂直滚动条。
This is the script I'm using at the moment:
这是我目前使用的脚本：
<script type="text/javascript">
if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height)) {
$("html").css("overflow", "hidden");
} else {
$("html").css("overflow", "auto");
}
</script>
I've tried like this without any success:
我试过这样没有任何成功：
<script type="text/javascript">
if(window.fullScreen) {
$("html").css("overflow", "hidden");
} else {
$("html").css("overflow", "auto");
}
</script>
Tank you as always.
像往常一样坦克你。
EDIT:
<script type="text/javascript" src="jquery.js"></script>is being loaded and other jquery script's are working ok.
编辑：
<script type="text/javascript" src="jquery.js"></script>正在加载并且其他 jquery 脚本工作正常。
EDIT: I've tested with:
编辑：我已经测试过：
$(document).ready(function() {
$("body").css("overflow", "hidden");
});
And it works!
So I believe that for some reason the JavaScript condition code it's not working!
if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height))...
它有效！所以我相信由于某种原因，JavaScript 条件代码不起作用！
if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height))...
EDIT:
编辑：
Solution found!
解决方案找到了！
<script type="text/javascript">
var control = 0;
function scrollbar(){
if(event.keyCode == 122 && control == 0){
//remove scrollbar
$("body").css("overflow", "hidden");
control = 1;
}
else{
//add scrollbar
$("body").css("overflow", "auto");
control = 0;
}
}
</script>
If you want to use this don't forget to attach the function to the body for example like:
如果您想使用它，请不要忘记将函数附加到主体，例如：
<body onkeydown="scrollbar();">
UPDATE:
更新：
Work's in chrome, opera, ie, safari except for firefox! What can be done to fix firefox?
工作在 chrome、opera、ie、safari 中，firefox 除外！可以做些什么来修复 Firefox？
回答by BudgieInWA
It looks like the javascript is only being run once, when the document loads, and not re-evaluate afterwards. If this is the only problem, you should see the correct behaviour if you are in full screen then load the page. To fix this you will have to make a function out of your code and call it every time the window is resized. Using jQuery, you can do this using an anonymous function:
看起来 javascript 只在文档加载时运行一次，之后不会重新评估。如果这是唯一的问题，您应该在全屏模式下看到正确的行为，然后加载页面。要解决此问题，您必须从代码中创建一个函数，并在每次调整窗口大小时调用它。使用 jQuery，您可以使用匿名函数执行此操作：
<script type="text/javascript">
$(window).resize(function() {
if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height)) {
$("html").css("overflow", "hidden");
} else {
$("html").css("overflow", "auto");
}
});
$(document).ready(function(){
$(window).resize();
// trigger the function when the page loads
// if you have another $(document).ready(), simply add this line to it
});
</script>
This binds the function to the resize event handler and you should see correct results! If that works it will be a muchnicer and robust way of doing it.
这会将函数绑定到 resize 事件处理程序，您应该会看到正确的结果！如果这样的作品将是一个很大更好，做它的可靠的方法。
