I need to remove the Horizontal Scrollbar on an overflown <DIV>

Question

I have defined a tag with a CSS attribute "overflow" set to "scroll". This is giving me both the vertical and the horizontal scroll bars. I only want the vertical scroll bar. What should i do?

Answer 1

You could try using the

overflow-y: scroll;

This will give you a vertical scroll-bar...

---

Using

overflow-y: auto;

will only show the scrollbar if it is necessary.

Answer 2

Try using "overflow-y: scroll;" instead. It's CSS3, but as far as I know, it's supported by every modern browser (IE6+, FF, Opera, Chrome/Safari/WebKit/etc.).

A quick explanation of the various overflow/-x/-y values, for those not familiar with them:

• visible – The default. Content which does not fit "overflows" the box, usually appearing over or under adjacent content.
• hidden – Content which does not fit is "guillotined" — cut off at the edges of the box.
• auto – Content which does not fit causes a scroll bar to appear. Does not necessarily cause both scroll bars to appear at once; if content fits horizontally but not vertically, only a vertical scroll bar will appear.
• scroll – Similar to auto, but scroll bar(s) appear whether needed or not. AFAIK, mostly used to prevent centered content from "jumping" if a scroll bar needs to be added to dynamic (e.g. AJAX) content.

Answer 3

overflow:auto;

Answer 4

I realize this is a very old question but I stumbled across it today. If, like me, you only want the y-scrollbar and then only when it's needed, I found this works:

.myclass {
    overflow-x: hidden;
    overflow-y: auto;
}

Cheers, Mark