javascript - Remove vertical scrollbar on fullscreen?

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.

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

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?

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.

EDIT: I've tested with:

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

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?

Share edited Aug 18, 2017 at 16:32 ROMANIA_engineer 56.7k30 gold badges209 silver badges205 bronze badges asked Jun 17, 2011 at 12:00 obinoob 6575 gold badges13 silver badges34 bronze badges

2 I suggest $("body").css("overflow","hidden"), or make a div wraps everything and use overflow property. – JiminP Commented Jun 17, 2011 at 12:02
I've tried also $("body").css("overflow","hidden") without any success either... – obinoob Commented Jun 17, 2011 at 12:04
In fullscreen I don't need scrollbar. – obinoob Commented Jun 17, 2011 at 12:05
1 I could be wrong, but this script will execute once the page loads. And if it is not loading full screen, then you will likely not get the desired results. You probably need to attach a click event to the F11 key. – Jason Gennaro Commented Jun 17, 2011 at 12:26
That make all sense! Thank you – obinoob Commented Jun 17, 2011 at 12:30

Add a ment |

1 Answer 1

Sorted by: Reset to default 6

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:

<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 much nicer and robust way of doing it.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Remove vertical scrollbar on fullscreen? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)