X
Tap here to go to the mobile version of the site.

Support Forum

I have Firefox 7 and I'm using it in my netbook. The screen is very small so I want to have as less UI as possible. I'd like to know if it's possible to remove or disable the vertical scrbollbar. Thanks

Posted

There isn't really too much more to say. The screen resolution is 1024 x 600. And most of the sites don't fit, so even 20 px more would be great.

There isn't really too much more to say. The screen resolution is 1024 x 600. And most of the sites don't fit, so even 20 px more would be great.

Modified by sironitomas

Chosen solution

You can try this code instead in userChrome.css You may have to adjust the margin to only hide the scroll bar.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

browser {margin-right:-14px!important; overflow-y:scroll!important;}
Read this answer in context 0

Additional System Details

This started when...

Always

Installed Plug-ins

  • Version: 2.3.2.0
  • Google Talk Plugin Video Accelerator version:0.1.44.11
  • This plugin provides integration with Gnome Shell for live extension enabling and disabling. It can be used only by extensions.gnome.org
  • The Totem 3.2.0 plugin handles video and audio streams.
  • DivX Web Player version 1.4.0.233
  • Shockwave Flash 11.0 r1

Application

  • User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:7.0.1) Gecko/20100101 Firefox/7.0.1

More Information

m-wynn 15 solutions 204 answers

I don't believe the scrollbar is quite 20px, but you can view custom styles at www.userstyles.org

By installing the stylish addon (www.addons.mozilla.org is currently unavailable for me) , you can install custom themes: some will remove or change the scrollbar, and some will change the site so that it is netbook-friendly.

I don't believe the scrollbar is quite 20px, but you can view custom styles at www.userstyles.org By installing the stylish addon (www.addons.mozilla.org is currently unavailable for me) , you can install custom themes: some will remove or change the scrollbar, and some will change the site so that it is netbook-friendly.
Hasan 469 solutions 5600 answers

By Vertical Toolbar if you mean the Sidebar, you can close it by clicking on the x button.

By Vertical Toolbar if you mean the Sidebar, you can close it by clicking on the x button.

Question owner

I didn't say toolbar!

I didn't say toolbar!

Question owner

I don't want to change some site's appearance. I want to disable the scrollbar in Firefox, not certain sites.

I don't want to change some site's appearance. I want to disable the scrollbar in Firefox, not certain sites.
Hasan 469 solutions 5600 answers
http://forums.mozillazine.org/viewtopic.php?f=38&t=61692 Check and tell if its working.
m-wynn 15 solutions 204 answers

Userstyles can edit either the web pages (the content), or your browser (the chrome), including the scrollbars. Editing your userstyles.css, like mha007 said, should work just fine, though.

Userstyles can edit either the web pages (the content), or your browser (the chrome), including the scrollbars. Editing your userstyles.css, like mha007 said, should work just fine, though.

Question owner

I tried typing this in [firefox profile folder]/chrome/userContent.css:

ui.scrollbar { display: none ! important; }

It doesn't work. Any recommendations?

http://www-archive.mozilla.org/unix/customizing.html is totally out of date.

I tried typing this in [firefox profile folder]/chrome/userContent.css: ui.scrollbar { display: none ! important; } It doesn't work. Any recommendations? http://www-archive.mozilla.org/unix/customizing.html is totally out of date.
cor-el
  • Top 10 Contributor
  • Moderator
17532 solutions 158534 answers

If you hide the scroll bar then you can't use the mouse to scroll and only the keyboard works.

Use this in userContent.css to hide the scroll bars:

body {
 overflow-x: hidden !important;
 overflow-y: hidden !important;
}

You can also use this code in userChrome.css to hide the vertical scroll bar.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
browser {overflow-y: hidden !important; }
If you hide the scroll bar then you can't use the mouse to scroll and only the keyboard works. Use this in userContent.css to hide the scroll bars: <pre><nowiki>body { overflow-x: hidden !important; overflow-y: hidden !important; }</nowiki></pre> You can also use this code in userChrome.css to hide the vertical scroll bar. <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ browser {overflow-y: hidden !important; } </nowiki></pre>

Question owner

Well, cor-el solution works, but I expected to use the mouse wheel to scroll. What does the scrollbar has to do with the mouse-scrolling event?

I just can't get used to scroll with the keyboard only.

Well, cor-el solution works, but I expected to use the mouse wheel to scroll. What does the scrollbar has to do with the mouse-scrolling event? I just can't get used to scroll with the keyboard only.
cor-el
  • Top 10 Contributor
  • Moderator
17532 solutions 158534 answers

Chosen Solution

You can try this code instead in userChrome.css You may have to adjust the margin to only hide the scroll bar.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

browser {margin-right:-14px!important; overflow-y:scroll!important;}
You can try this code instead in userChrome.css You may have to adjust the margin to only hide the scroll bar. <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ browser {margin-right:-14px!important; overflow-y:scroll!important;} </nowiki></pre>

Modified by cor-el

Question owner

The solution is dirty, but works. There should be a way to disable the vertical scrollbar, and not hide it.

Besides, a different theme with a different scrollbar width would ruin this, eating page space or showing part of the scrollbar.

The solution is dirty, but works. There should be a way to disable the vertical scrollbar, and not hide it. Besides, a different theme with a different scrollbar width would ruin this, eating page space or showing part of the scrollbar.
cor-el
  • Top 10 Contributor
  • Moderator
17532 solutions 158534 answers

I've added an overflow-y:scroll to the code to make the scroll bar visible all the time to prevent losing px if there isn't a scroll bar needed. You will have to adjust the code if you the scroll bar width is changed. You can choose to keep 1 or 2 px in case you still want to use the mouse to drag the page up or down or see where you are on the page. You can also use auto-scrolling via a middle-click.

I've added an overflow-y:scroll to the code to make the scroll bar visible all the time to prevent losing px if there isn't a scroll bar needed. You will have to adjust the code if you the scroll bar width is changed. You can choose to keep 1 or 2 px in case you still want to use the mouse to drag the page up or down or see where you are on the page. You can also use auto-scrolling via a middle-click.
David McRitchie 320 solutions 3092 answers

I mostly use the "Grab and Drag" extension when something is wrong with a page and it has a missing scrollbar. The mouse-wheel may or may not work in such situations. Anyway its always useful to have an alternate means of scrolling when a page author removes the ability and you need to scroll. Purposely removing scrollbars and/or scrolling is not for me -- it causes problems. But Cor-el's suggestions and Grab and Drag should make things more like mobile devices which certainly don't have scrollbars.

(actually the style code to remove vertical scrollbar is not working for me in Stylish -- perhaps I hate losing scrollbars so much that something else is involved)

Grab and Drag :: Add-ons for Firefox "Enables Adobe Acrobat-style grab and drag scrolling, Flick gestures, and Momentum scrolling in Firefox. Especially useful for Tablet PCs, UMPCs, and other pen or touchscreen devices."

On a netbook it is mainly the vertical space that is at a premium not the horizontal space taken by the vertical scrollbar (about the space of "nnn"). I think I would change the zoom setting temporarily if it was a problem.

The above includes a link for scrolling that you might want to review since you are messing with it.

A situation which does interfere with horizontal space are PRE statements with code examples that do not wrap, and with image sizes. Both can affect with width of table columns and use more horizontal space. Solutions might include:

Or if you install the "Stylish": extension (recommended)

For problem images use this to reduce size of a single image

I mostly use the "Grab and Drag" extension when something is wrong with a page and it has a missing scrollbar. The mouse-wheel may or may not work in such situations. Anyway its always useful to have an alternate means of scrolling when a page author removes the ability and you need to scroll. Purposely removing scrollbars and/or scrolling is not for me -- it causes problems. But Cor-el's suggestions and Grab and Drag should make things more like mobile devices which certainly don't have scrollbars. (actually the style code to remove vertical scrollbar is not working for me in Stylish -- perhaps I hate losing scrollbars so much that something else is involved) Grab and Drag :: Add-ons for Firefox "Enables Adobe Acrobat-style grab and drag scrolling, Flick gestures, and Momentum scrolling in Firefox. Especially useful for Tablet PCs, UMPCs, and other pen or touchscreen devices." *https://addons.mozilla.org/firefox/addon/grab-and-drag/ On a netbook it is mainly the vertical space that is at a premium not the horizontal space taken by the vertical scrollbar (about the space of "nnn"). I think I would change the zoom setting temporarily if it was a problem. *http://kb.mozillazine.org/Netbooks The above includes a link for scrolling that you might want to review since you are messing with it. A situation which does interfere with horizontal space are PRE statements with code examples that do not wrap, and with image sizes. Both can affect with width of table columns and use more horizontal space. Solutions might include: * Toggle Word Wrap :: Add-ons for Firefox<br>https://addons.mozilla.org/firefox/addon/toggle-word-wrap/ Or if you install the "Stylish": extension (recommended) * '''Stylish''' (247.8KB) :: Add-ons for Firefox<br>https://addons.mozilla.org/firefox/addon/stylish/ * '''Wrap lines within PRE tagged text''' <br>http://userstyles.org/styles/19595/wrap-lines-within-pre-tagged-text * Wrap PRE text (http and https only)<br>http://userstyles.org/styles/19596/wrap-pre-text-http-and-https-only For problem images use this to reduce size of a single image * '''Image Zoom''' :: Add-ons for Firefox (78.8KB)<br>https://addons.mozilla.org/en-US/firefox/addon/image-zoom/