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

Advertisements

One Response to “CSS | Hide Overflow Vertical Scrollbar”

  1. kranthi kumar Says:

    Yes , It’s correct Ans
    but you must write the css style in head tags like

    body{
    overflow-x: hidden;
    -ms-overflow-x: hidden;
    }

    thanks


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: