Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disable vertical scroll bar on div overflow: auto

People also ask

How do I turn off the overflow auto scroll bar?

To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so: HTML.

How do I stop scrolling when scrolling a div element CSS?

mouseleave(function() { $('body'). bind('mousewheel DOMMouseScroll', function() { return true; }); }); This is stopping all scrolling where as I want scrolling to still be possible inside the container.

How do I get rid of unnecessary scrollbar?

A quick fix is to add overflow: hidden to the CSS for your #footer . Note: A scrollbar will still appear if your #body content flows out of the the viewport. Show activity on this post. It will remove unnecessary scroll bars.


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

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

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.


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>

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.


How about a shorthand notation?

{overflow: auto hidden;}