Disable browsers vertical and horizontal scrollbars

Question

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

I think in some situations specially if you want to toggle between scroll and no scroll this solution is more preferable: http://stackoverflow.com/questions/8701754/just-disable-scroll-not-hide-it — Yousef Salimpour, Aug 26 '14 at 10:20
You can find a more complete answer to this question here http://stackoverflow.com/a/25561646/1922144 — davidcondrey, Sep 25 '14 at 21:27

score 147 · Answer 1 · answered Oct 28 '08 at 09:44

147

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.

answered Oct 28 '08 at 09:44

Alexander Prokofyev

33,874
33
95
118

4

Overflow hidden does not always work in IE. See AnthonyWJones answer below. – Tiago A. Jan 02 '13 at 16:41
4

`oveflow: hidden` won't prevent anything on smartphones. – dvlden Oct 23 '14 at 00:24
In chrome, this disables the scrollbar without hiding it (it is still there and still changing the size of everything else, but now its grayed out) – taltamir Sep 20 '17 at 18:17

score 131 · Answer 2 · answered May 30 '12 at 07:18

131

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
}

answered May 30 '12 at 07:18

Lyncee

1,311
1
8
2

6

Two upvotes is remarkably little for being the only pure javascript answer. – john-jones Nov 16 '12 at 11:03
2

@HermannIngjaldsson: Seeing OP asked for JavaScript or jQuery solution and had accepted a jQuery solution 4 years ago it only makes sense. I'm not saying the answer is not good, just stating the obvious about the lower votes. +1 from me anyway. – Nope Oct 17 '13 at 15:26
this is the only solution that worked for me, since the body hidden overflow doesn't attack the whole document, this is the right solution for this problem! thanks so much, you saved me a lot of time! – Adnane.T Oct 09 '14 at 19:31
This is a brilliant solution and deserves an upvote. It also solves issue with fixed css, where page will be scroll to top. – haipham23 Jan 26 '17 at 14:40

score 50 · Answer 3 · answered Oct 28 '08 at 09:07

50

Try CSS

<body style="overflow: hidden">

answered Oct 28 '08 at 09:07

Ray Lu

26,208
12
60
59

15

For browser compatibility I'd add this style to the HTML tag as well: html, body {overflow:hidden;} – Ady Oct 28 '08 at 10:21

score 31 · Answer 4 · edited Feb 22 '16 at 06:46

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.

dosen't the ',' should be ';',in the body css? – paynestrike May 18 '15 at 06:57 — paynestrike, May 18 '15 at 06:57

score 12 · Answer 5 · edited Dec 14 '11 at 12:51

12

Try CSS.

If you want to remove Horizontal

overflow-x: hidden;

And if you want to remove Vertical

overflow-y: hidden;

edited Dec 14 '11 at 12:51

DaveShaw

52,123
16
112
141

answered Dec 14 '11 at 12:49

shafraz

121
1
2

score 10 · Answer 6 · answered Dec 27 '13 at 12:56

10

In modern versions of IE (IE10 and above), scrollbars can be hidden using the -ms-overflow-style property.

html {
     -ms-overflow-style: none;
}

In Chrome, scrollbars can be styled:

::-webkit-scrollbar {
    display: none;
}

This is very useful if you want to use the 'default' body scrolling in a web application, which is considerably faster than overflow-y: scroll.

answered Dec 27 '13 at 12:56

Lg102

4,733
3
38
61

only this has worked for me from all the answers :) thanks! – Gediminas Šukys Dec 07 '16 at 14:36

score 8 · Answer 7 · answered Aug 05 '10 at 20:20

8

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

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

and

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

answered Aug 05 '10 at 20:20

Gawin

994
10
12

score 5 · Answer 8 · edited Dec 11 '13 at 10:40

5

IE has some bug with the scrollbars. So if you want either of the two, you must include the following to hide the horizontal scrollbar:

overflow-x: hidden;
overflow-y:scroll;

and to hide vertical:

overflow-y: hidden;
overflow-x: scroll;

edited Dec 11 '13 at 10:40

Hulk1991

3,079
13
31
46

answered Apr 18 '13 at 11:34

Zeeshan Ali

343
5
6

score 4 · Answer 9 · answered Sep 25 '15 at 11:41

(I can't comment yet, but wanted to share this):

Lyncee's code worked for me in desktop browser. However, on iPad (Chrome, iOS 9), it crashed the application. To fix it, I changed

document.documentElement.style.overflow = ...

to

document.body.style.overflow = ...

which solved my problem.

score 2 · Answer 10 · answered Apr 26 '13 at 00:21

2

Because Firefox has an arrow key short cut, you probably want to put a <div> around it with CSS style: overflow:hidden;.

answered Apr 26 '13 at 00:21

Qvcool

460
3
10

score 2 · Answer 11 · answered May 08 '16 at 10:33

Using JQuery you can disable scrolling bar with this code :

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
     }
});

Also you can enable it again with this code :

 $('body').unbind('mousewheel');

Disable browsers vertical and horizontal scrollbars

11 Answers11

Linked

Related