Question

我想在切换到全屏后删除垂直滚动条。

这是我目前正在使用的脚本：

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

我尝试过这样做没有取得任何成功：

<script type="text/javascript">
if(window.fullScreen) {
    $("html").css("overflow", "hidden");
} else {
    $("html").css("overflow", "auto");
}
</script>

坦克你一如既往。

编辑：正在加载<script type="text/javascript" src="jquery.js"></script>，其他jquery脚本正常运行。

编辑：我测试过：

$(document).ready(function() {
    $("body").css("overflow", "hidden");
});

它有效！因此我认为由于某种原因，JavaScript条件代码无效！ if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height)) ...

编辑：

找到解决方案！

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

如果你想使用它，不要忘记将功能附加到身体上，例如：

<body onkeydown="scrollbar();">

更新：

除了firefox之外，在chrome，opera，即safari中工作！可以做些什么来修复firefox？

Answer 1

看起来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>

这会将函数绑定到resize事件处理程序，您应该看到正确的结果！如果可行的话，它将是很多更好，更健壮的方式。

全屏删除垂直滚动条？

1 个答案: