Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How to hide horizontal scrool bar with CSS code?

  • 4 replies
  • 3 have this problem
  • 13 views
  • Last reply by cor-el

more options

I've hidden vertical scroll bar with css code:

#content browser {
 margin-right: -14px !important;
 overflow-y: scroll;
 overflow-x: hidden;
}

It's located in Chrome folder in my alphanumeric folder. I would really like to know is it possible to add code to hide the horizontal one?

I've hidden vertical scroll bar with css code: <pre><nowiki>#content browser { margin-right: -14px !important; overflow-y: scroll; overflow-x: hidden; }</nowiki></pre> It's located in Chrome folder in my alphanumeric folder. I would really like to know is it possible to add code to hide the horizontal one?

Modified by cor-el

All Replies (4)

more options

The rule

overflow-x: hidden;

will do it, but perhaps you are applying it to the wrong element? If the bar is for the whole page, you may need:

html, body {overflow-x: hidden;}

Not that I condone that on websites -- it's annoying when the content overflows the viewfinder with no way to see it. For example, see this recent support thread: My bottom horizontal scroll bar is missing on most (but not all webpages) on Firefox.

more options

Did you try code like this in userChrome.css?

#content browser{
overflow-y:scroll;
overflow-x:scroll;
margin-right:-14px!important;
margin-bottom:-14px!important;
}
more options

Sorry for not replying sooner. I've tried your code cor-el and it moves every website down for 14px. That's not the effect I was looking for. I would like to hide the horizontal scroll bar when it appears.

more options

You would have to use this code to the userContent.css file.

html, body {overflow-x: hidden!important;}