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

Support Forum

How to hide or disable vertical and horizontal scrollbars?

Posted

I would like to hide or disable the vertical and horizontal scrollbars from the Firefox (20.0.1 at the moment) window, is there any CSS rule or setting in "about:config" resource to get this behaviour?

Thanks in advance.

I would like to hide or disable the vertical and horizontal scrollbars from the Firefox (20.0.1 at the moment) window, is there any CSS rule or setting in "about:config" resource to get this behaviour? Thanks in advance.

Chosen solution

The above posted code should still be working.

Make sure that you have placed the userChrome.css file in the chrome folder in the Firefox profile folder.
This chrome folder doesn't exist by default and needs to be created.


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

#content browser {
 margin-right: -14px !important;
 overflow-y: scroll;
 overflow-x: hidden;
}
Read this answer in context 2

Additional System Details

Installed Plug-ins

  • Google Talk Plugin Video Accelerator version:0.1.44.24
  • Version: 3.17.0.0
  • Shockwave Flash 11.2 r202
  • This plugin provides integration with Gnome Shell for live extension enabling and disabling. It can be used only by extensions.gnome.org

Application

  • Firefox 20.0.1
  • User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:20.0) Gecko/20100101 Firefox/20.0
  • Support URL: http://support.mozilla.org/1/firefox/20.0.1/Linux/es-MX/

Extensions

  • 1-Click YouTube Video Downloader 2.0.4 (YoutubeDownloader@PeterOlayev.com)
  • LiveReload 0.6.4 (livereload@livereload.com)
  • Troubleshooter 1.1a (troubleshooter@mozilla.org)
  • Vimperator 3.7 (vimperator@mozdev.org) (Inactive)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: Intel Open Source Technology Center -- Mesa DRI Intel(R) Ivybridge Mobile
  • adapterDeviceID: Mesa DRI Intel(R) Ivybridge Mobile
  • adapterDrivers:
  • adapterRAM:
  • adapterVendorID: Intel Open Source Technology Center
  • driverDate:
  • driverVersion: 3.0 Mesa 9.1.1
  • info: {u'AzureCanvasBackend': u'cairo', u'AzureFallbackCanvasBackend': u'none', u'AzureContentBackend': u'none'}
  • numAcceleratedWindows: 0
  • numAcceleratedWindowsMessage: [u'']
  • numTotalWindows: 1
  • webglRenderer: Intel Open Source Technology Center -- Mesa DRI Intel(R) Ivybridge Mobile
  • windowLayerManagerType: Basic

Modified Preferences

  • accessibility.typeaheadfind.autostart: False
  • accessibility.typeaheadfind.flashBar: 0
  • browser.cache.disk.capacity: 358400
  • browser.cache.disk.smart_size.first_run: False
  • browser.cache.disk.smart_size.use_old_max: False
  • browser.cache.disk.smart_size_cached_value: 358400
  • browser.link.open_newwindow.restriction: 0
  • browser.places.smartBookmarksVersion: 4
  • browser.search.useDBForOrder: True
  • browser.startup.homepage: http://www.archlinux.org/
  • browser.startup.homepage_override.buildID: 20130409194949
  • browser.startup.homepage_override.mstone: 20.0.1
  • browser.tabs.warnOnClose: False
  • browser.tabs.warnOnOpen: False
  • dom.mozApps.used: True
  • dom.popup_allowed_events: change click dblclick mouseup reset submit keypress
  • dom.w3c_touch_events.expose: False
  • extensions.lastAppVersion: 20.0.1
  • font.default.x-unicode: sans-serif
  • font.language.group: x-unicode
  • font.minimum-size.x-unicode: 12
  • font.name.monospace.x-unicode: Source Code Pro
  • font.name.sans-serif.x-occidental: Source Sans Pro
  • font.name.sans-serif.x-unicode: Source Sans Pro
  • font.size.variable.x-occidental: 14
  • network.cookie.prefsMigrated: True
  • places.database.lastMaintenance: 1366380355
  • places.history.expiration.transient_current_max_pages: 101294
  • plugin.disable_full_page_plugin_for_types: application/pdf
  • plugin.importedState: True
  • privacy.sanitize.migrateFx3Prefs: True

Misc

  • User JS: No
  • Accessibility: No
cor-el
  • Top 10 Contributor
  • Moderator
11997 solutions 111481 answers

Helpful Reply

You can hide scroll bars with an overflow:hidden rule, but if you would hide scroll bars then you may not be able to scroll the browser window anymore.

You can try code like this in userChrome.css and adjust the margin-right:

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

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

Add code to the userChrome.css file below the default @namespace line.

The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the user profile folder.

You can hide scroll bars with an overflow:hidden rule, but if you would hide scroll bars then you may not be able to scroll the browser window anymore. You can try code like this in userChrome.css and adjust the margin-right: <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ #content browser{margin-right:-14px!important;overflow-y:scroll;overflow-x:hidden;} </nowiki></pre> ---- Add code to the userChrome.css file below the default @namespace line. *http://kb.mozillazine.org/userChrome.css The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the user profile folder. *http://kb.mozillazine.org/Editing_configuration

Question owner

It works great, gives exactly the results I was looking for! Thanks again!

Tested on Firefox v.20.0.1 running on ArchLinux x86_64 GNU/Linux.

CSS code written in '~/.mozilla/firefox/<alphanumeric-profile>/chrome/userChrome.css', don't forget to restart Firefox after editing/creating the files/folders.

It works great, gives exactly the results I was looking for! Thanks again! Tested on Firefox v.20.0.1 running on ArchLinux x86_64 GNU/Linux. CSS code written in '~/.mozilla/firefox/<alphanumeric-profile>/chrome/userChrome.css', don't forget to restart Firefox after editing/creating the files/folders.
selkovjr 0 solutions 8 answers

This solution does not work in v.23.0. I put this style in

~/.mozilla/firefox/eyrf55gp.default/

which I determined was the active profile based on its timestamp. The scrollbars are still there.

I am running gentoo, so can patch firefox easily. Is there a feature in the code that will allow me to dispose of scrollbars entirely? I never use them for scrolling. I wouldn't mind one scrollbar show in the active window as an indicator while it is scrolling (like in safari), but otherwise scrollbars are just a waste of space and a huge clutter factor.

This solution does not work in v.23.0. I put this style in ~/.mozilla/firefox/eyrf55gp.default/ which I determined was the active profile based on its timestamp. The scrollbars are still there. I am running gentoo, so can patch firefox easily. Is there a feature in the code that will allow me to dispose of scrollbars entirely? I never use them for scrolling. I wouldn't mind one scrollbar show in the active window as an indicator while it is scrolling (like in safari), but otherwise scrollbars are just a waste of space and a huge clutter factor.
cor-el
  • Top 10 Contributor
  • Moderator
11997 solutions 111481 answers

Chosen Solution

The above posted code should still be working.

Make sure that you have placed the userChrome.css file in the chrome folder in the Firefox profile folder.
This chrome folder doesn't exist by default and needs to be created.


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

#content browser {
 margin-right: -14px !important;
 overflow-y: scroll;
 overflow-x: hidden;
}
The above posted code should still be working. Make sure that you have placed the userChrome.css file in the chrome folder in the Firefox profile folder.<br /> This chrome folder doesn't exist by default and needs to be created. *http://kb.mozillazine.org/Editing_configuration/Troubleshooting ---- <pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */ #content browser { margin-right: -14px !important; overflow-y: scroll; overflow-x: hidden; } </nowiki></pre>
selkovjr 0 solutions 8 answers

It works. Beautiful.

The scrollbars have not completely disappeared, but they are now squashed to four pixels wide (including the window border) and the indicator bar itself is just one pixel wide. Not exactly how I wanted it, but good enough.

The reason I was unable to get it to work following the instructions (including the above KB article) is that my profile folder is not .mozilla. I had to hunt it down and then create the chrome folder in it. Here's what my folder structure is (with a lot of stuff omitted):

.mozilla/
├── appreg
├── eclipse
├── extensions
├── firefox
│   ├── 5q0epjhm.default
│   ├── Crash Reports
│   ├── a459vpi6.default
│   ├── eyrf55gp.default
│   │   ├── Cache
│   │   ├── _CACHE_CLEAN_
│   │   ├── adblockplus
│   │   ├── addons.sqlite
│   │   ├── addons.sqlite-journal
│   │   ├── blocklist.xml
│   │   ├── bookmarkbackups
│   │   ├── cert8.db
│   │   ├── cert_override.txt
│   │   ├── chrome
│   │   │   └── userChrome.css
│   │   └── xpti.dat
│   ├── pluginreg.dat
│   └── profiles.ini
├── pluginreg.dat
└── plugins

The chrome folder was not there; I cerated it following cor-el's advice.

I could tell which of the hash-coded profiles was active by checking the access timestamps on them. Also, there is the profile.ini file containing a reference to it:

[General]
StartWithLastProfile=1

[Profile0]
Name=default
IsRelative=1
Path=eyrf55gp.default

I don't know why my profile layout does not match its description in the docs, but so it is.

It works. Beautiful. The scrollbars have not completely disappeared, but they are now squashed to four pixels wide (including the window border) and the indicator bar itself is just one pixel wide. Not exactly how I wanted it, but good enough. The reason I was unable to get it to work following the instructions (including the above KB article) is that my profile folder is not <code>.mozilla</code>. I had to hunt it down and then create the <code>chrome</code> folder in it. Here's what my folder structure is (with a lot of stuff omitted): <pre> .mozilla/ ├── appreg ├── eclipse ├── extensions ├── firefox │   ├── 5q0epjhm.default │   ├── Crash Reports │   ├── a459vpi6.default │   ├── <b>eyrf55gp.default</b> │   │   ├── Cache │   │   ├── _CACHE_CLEAN_ │   │   ├── adblockplus │   │   ├── addons.sqlite │   │   ├── addons.sqlite-journal │   │   ├── blocklist.xml │   │   ├── bookmarkbackups │   │   ├── cert8.db │   │   ├── cert_override.txt │   │   ├── <b>chrome</b> │   │   │   └── <b>userChrome.css</b> │   │   └── xpti.dat │   ├── pluginreg.dat │   └── <b>profiles.ini</b> ├── pluginreg.dat └── plugins </pre> The <code>chrome</code> folder was not there; I cerated it following cor-el's advice. I could tell which of the hash-coded profiles was active by checking the access timestamps on them. Also, there is the <code>profile.ini</code> file containing a reference to it: <pre> [General] StartWithLastProfile=1 [Profile0] Name=default IsRelative=1 Path=<b>eyrf55gp.default</b> </pre> I don't know why my profile layout does not match its description in the docs, but so it is.
cor-el
  • Top 10 Contributor
  • Moderator
11997 solutions 111481 answers

This is the normal layout for the Firefox profiles.

You seem to have two other profile folders (5q0epjhm.default and a459vpi6.default), probably from older Firefox versions.
You can probably remove the pluginreg.dat files apart from the one in the current Firefox profile folder.

I don't know if the Cache folder in the current Firefox profile folder is still in use. Current Firefox versions have the cache folder in ~/.cache/mozilla/firefox (you can check the location on the about:cache page).

This is the normal layout for the Firefox profiles. You seem to have two other profile folders (5q0epjhm.default and a459vpi6.default), probably from older Firefox versions.<br /> You can probably remove the pluginreg.dat files apart from the one in the current Firefox profile folder. I don't know if the Cache folder in the current Firefox profile folder is still in use. Current Firefox versions have the cache folder in ~/.cache/mozilla/firefox (you can check the location on the about:cache page).