Disable browsers vertical and horizontal scrollbars

Disable browsers vertical and horizontal scrollbars

Is it possible to disable the browsers vertical and horizontal scrollbars using jQuery or javascript?

Solutions/Answers:

Solution 1:

In case you need possibility to hide and show scrollbars dynamically you could use

$("body").css("overflow", "hidden");

and

$("body").css("overflow", "auto");

somewhere in your code.

Solution 2:

function reloadScrollBars() {
    document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
}

function unloadScrollBars() {
    document.documentElement.style.overflow = 'hidden';  // firefox, chrome
    document.body.scroll = "no"; // ie only
}

Solution 3:

Try CSS

<body style="overflow: hidden">

Solution 4:

So far we have overflow:hidden on the body. However IE doesn’t always honor that and you need to put scroll=”no” on the body element as well and/or place overflow:hidden on the html element as well.

You can take this further when you need to ‘take control’ of the view port you can do this:-

<style>
 body {width:100%; height:100%; overflow:hidden; margin:0; }
 html {width:100%; height:100%; overflow:hidden; }
</style>

An element granted height 100% in the body has the full height of the window viewport, and element positioned absolutely using bottom:nnPX will be set nn pixels above the bottom edge of the window, etc.

Solution 5:

Try CSS.

If you want to remove Horizontal

overflow-x: hidden;

And if you want to remove Vertical

overflow-y: hidden;

Solution 6:

In case you also need support for Internet Explorer 6, just overflow the html

$("html").css("overflow", "hidden");

and

$("html").css("overflow", "auto");