CSS | Hide Overflow Vertical Scrollbar

When you set a div style like this:

div#tbl-container
{
width: 600px;
overflow: auto;
scrollbar-base-color:#ffeaff
}

it will show both the horizontal and vertical scrollbars if the content is large enough to require them.

However in IE due to a bug, you can still see them.

The solution would be to use the following css styling to hide the vertical scrollbar:

overflow: auto;
overflow-y: hidden;

or

overflow-x: hidden; (to hide the horizontal scrollbar)

IE6-7 (amongst other browsers) supports the proposed CSS3 extension to set scrollbars independently, which you could use to suppress the vertical scrollbar:

You may also need to add for IE8:

-ms-overflow-y: hidden; (hides vertical scrollbar)

or

-ms-overflow-x: hidden; (hides horizontal scrollbar)

as Microsoft are threatening to move all pre-CR-standard properties into their own ‘-ms’ box in IE8 Standards Mode.

Happy overflowing!!

Resources: here

Advertisement