Disable vertical scroll bar on div overflow: auto
414,286
Solution 1
These two CSS properties can be used to hide the scrollbars:
overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal
Solution 2
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.
Solution 3
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>
Solution 4
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.
Solution 5
How about a shorthand notation?
{overflow: auto hidden;}
Author by
joedborg
Updated on July 08, 2021Comments
-
joedborg almost 3 years
Is it possible to allow only a horizontal scroll bar when using overflow:auto (or scroll)?
-
QMaster about 10 years@Coulton What about safari and chrome?
-
Luke about 10 yearsAccording to this it works in Safari and I know it works in Chrome.
-
William Brochmann almost 8 yearsWorth mentioning that you can still scroll in the div using
tab
, provided there are links or input elements in the hidden overflow