CODEWITHSUNDEEP
htmlcssscrollscrollbar
joedborg
joedborg

Reputation: 18353

Disable vertical scroll bar on div overflow: auto

Is it possible to allow only a horizontal scroll bar when using overflow:auto (or scroll)?

Upvotes: 148

Views: 486870

Answers (9)

user3806549
user3806549

Reputation: 1438

I used this code

html, body
    {
      -ms-content-zooming:none;  
      touch-action: none;
      content-zooming: none;
      overflow-y: hidden; // hide vertical
    overflow-x: hidden; 
    overflow-y: none; // hide vertical
    overflow-x: none; 
    }

Upvotes: 0

Chong Lip Phang
Chong Lip Phang

Reputation: 9279

How about a shorthand notation?

{overflow: auto hidden;}

Upvotes: 3

Tahir Alvi
Tahir Alvi

Reputation: 994

if you want to disable the scrollbar, but still able to scroll the content of inner DIV, use below code in css,

.divHideScroll::-webkit-scrollbar {
    width: 0 !important
}
.divHideScroll {
    overflow: -moz-scrollbars-none;
}
.divHideScroll {
    -ms-overflow-style: none;
}

divHideScroll is the class name of the target div.

It will work in all major browser (Chrome, Safari, Mozilla, Opera, and IE)

Upvotes: 1

tamueka
tamueka

Reputation: 11

This rules are compatible whit all browser:

body {overflow: hidden; }
body::-webkit-scrollbar { width: 0 !important; }
body { overflow: -moz-scrollbars-none; }
body { -ms-overflow-style: none; }

Upvotes: 1

Zeinab
Zeinab

Reputation: 461

Add the following:

body{
overflow-y:hidden;
}

Upvotes: 2

Luke
Luke

Reputation: 23680

These two CSS properties can be used to hide the scrollbars:

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal

Upvotes: 275

Nirav Mehta
Nirav Mehta

Reputation: 7063

If you want to accomplish the same in Gecko (NS6+, Mozilla, etc) and IE4+ simultaneously, I believe this should do the trick:V

body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: auto;
}

This will be applied to entire body tag, please update it to your relevant css and apply this properties.

Upvotes: 10

Siva Charan
Siva Charan

Reputation: 18064

You should use only

overflow-y:hidden; - Use this for hiding the Vertical scroll

overflow-x:auto; - Use this to show Horizontal scroll

Luke has mentioned as both hidden. so I have given this separately.

Upvotes: 41

Random Guy
Random Guy

Reputation: 2900

overflow: auto;
overflow-y: hidden;

For IE8: -ms-overflow-y: hidden;

Or Else :

To hide X:

<div style="height:150x; width:450px; overflow-x:hidden; overflow-y: scroll; padding-bottom:10px;"></div>

To hide Y:

<div style="height:150px; width:450px; overflow-x:scroll ; overflow-y: hidden; padding-bottom:10px;"></div>

Upvotes: 21

Related Questions