Home/ Questions/Q 6049179
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T07:32:47+00:00

I want to remove vertical scrollbar after switch to fullscreen. This is the script

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0