Geek Answers Handbook

Delete vertical scrollbar in full screen?

I want to remove the vertical scroll bar after switching to full screen mode.

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 tried this without success:

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

Tank as always.

EDIT: <script type="text/javascript" src="jquery.js"></script> loading, and another jquery script is working fine.

EDIT: I tested with:

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

And it works! Therefore, I believe that for some reason, the JavaScript condition code does not work! 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, do not forget to attach the function to the body, for example:

 <body onkeydown="scrollbar();">

UPDATE:

Work in chrome, opera, i.e. safari except firefox! What can be done to fix firefox?

+4
source share
1 answer

It seems that javascript is run only once when the document is loaded, and then not re-evaluated. If this is the only problem, you should see the correct behavior if you are in full screen mode, and then load the page. To fix this, you have to make a function from your code and call it every time the window is resized. Using jQuery, you can do this with 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 the correct results! If this works, it will be a much nicer and more reliable way to do this.

+6
source

More articles:


All Articles