How to get rid of Firefox's scrollbar completely
If you think that Firefox's scrollbar is too large you have a couple of options to change it to a more appropriate size. You can for instance load the Better Scrollbars style in the Stylish add-on to reduce the size of the scrollbar in Firefox.
The style reduces the width of the horizontal and vertical toolbar to about half of the original size. That's great if you just need a few more pixels visible on the page for example without losing the scrollbar's functionality completely.
You can however go a step further and get rid of the scrollbar completely so that it is not displayed at all in Firefox. The websites that you display in the browser make use of the room in this case then.
If you do you need to use the mouse or keyboard to scroll the page. While that should not be a problem for most websites, it will cause issues on websites that block you from scrolling this way.
Take a look at the following screenshot to see how Firefox looks like without scrollbar on the right side of the browser chrome.
Let me show you how this is done. First, the hiding of the scrollbar and then second adding the scroll position indicator so that you know where you are on the page.
- Load about:support into the Firefox address bar and hit the enter key.
- Click on the Show Folder button next to Profile Folder to open the folder in the system's default file manager.
- Open the Chrome directory here. If it does not exist, create it.
- Open the userChrome.css file in the directory. Again, if it does not exist create it.
- Add the following line of code after the last line: #content browser{margin-right:-14px!important;margin-bottom:-14px!important;overflow-y:scroll;overflow-x:hidden;}
- Restart Firefox.
You will notice that the scrollbar is gone after the restart which means that you can only scroll using the mouse wheel, the middle mouse button, or the keyboard.
Scroll Progress is the add-on that we are using to add the scroll indicator to Firefox. Just install it from the Mozilla Add-ons repository and you should see the indicator in the top right corner of the screen. You can change the position to another corner in the preferences.
Here you can also modify text and background styles including the font size and weight displayed.
To restore the original functionality uninstall the extension and remove the line from the userChrome.css file.
Advertisement
Nice! thanks!
Gee I hope that browser example isn’t a sample of what your current browser is like. The scroll bars are fine if you installed themes in both Windows and Firefox, but I’m surprised (in your sample) you’re worried about screen real-estate in terms of width of visible area when you choose to use Firefox without the Tabs on Top feature and you are bothering with the status bar below.
The two major items on the status bar can be moved to the top. The Tabs on top feature pushes the tabs to be in lined with the Firefox Options button. The only bar that needs to be visible is the Navigation bar, everything else can be turned off or moved up to the navigation bar (especially for 16:9 screen users). But going by that sample, you don’t use many custom icons or Add-on’s for that matter so even in a 4:3 monitor this would still work.
Now this is the way to maximize screen real-estate. Frankly the scroll bars were never an issue in terms of screen real-estate. I guess some people are funny that way. I want more space and others only care about the width.
http://www.mediafire.com/view/6oah7olouh22625/My-current-Screen01.jpg
Everything on my desktop and browser I use on a regular basis so, those noting I don’t hide the task bar ~ it is more efficient for me to work with the information and tools it holds visible and instantly accessible at all times. As for my 10+ custom icons. Those are only the Add-on’s you can see, which further aid me and I can’t work without them.
It actually is, but since I’m changing the UI regularly, it is not really something that I pay attention to anymore. I have a large screen so it is less of an issue than for other users probably.
I prefer to be able to quickly toggle the scrollbar on and off. You can do this with the addon MinUI:
https://addons.mozilla.org/en-us/firefox/addon/minui/
It works perfectly with the latest Palemoon 20.1, though as another reviewer mentioned, you now have to reload the page for scrollbar hiding to take effect.
Thanks! Tried it on the current stable v 21.0 on Ubuntu 13.04, just had to change -14px to -13px, I think I’m sticking with it! :)
After a brief search, I found a similar way to do this in google Chrome (There are a few extensions that claim to do it, but I much prefer editing a cascaded style sheet than installing an extension).
http://xevia.webege.com/en-post.php?id=201109091
Now to find a similar page percentage scrolled HUD…
And found it!
https://github.com/adamzap/scroll-progress
Dammit after installing it using the chrome dev options to create the .crx file, it doesn’t work…
Just a static Percentage Icon, and it seems to have reintroduced a scrollbar albeit different then the default one.
Sucks, I’ll have to keep looking.
Good luck with your search ;)
thank you very much i was waiting for a simple way to do this for a long time (without having ro install the stylish extension)
These tips are of great help to users of devices with touchscreens (especially Windows 8 users).
I’ve used this for quite a while now, but it’s not perfect.
On websites where there is no scrollbar, the page is an extra 13px wide, which you can’t see.
And the same when you use this for the horizontal scrollbar. it takes 13 pixels off-screen.
Sadly I can’t find a way to fix this.