How to get rid of Firefox's scrollbar completely

Martin Brinkmann
Jun 10, 2013
Updated • Mar 26, 2014
Firefox
|
12

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.

firefox no scrollbar

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.

  1. Load about:support into the Firefox address bar and hit the enter key.
  2. Click on the Show Folder button next to Profile Folder to open the folder in the system's default file manager.
  3. Open the Chrome directory here. If it does not exist, create it.
  4. Open the userChrome.css file in the directory. Again, if it does not exist create it.
  5. 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;}
  6. 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

Tutorials & Tips


Previous Post: «
Next Post: «

Comments

  1. Scrollbarless user said on June 25, 2016 at 5:16 pm
    Reply

    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.

  2. Ge said on June 12, 2013 at 12:16 am
    Reply

    These tips are of great help to users of devices with touchscreens (especially Windows 8 users).

  3. qwartzy said on June 11, 2013 at 10:09 pm
    Reply

    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)

  4. cookiepuck said on June 11, 2013 at 10:59 am
    Reply

    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.

    1. Martin Brinkmann said on June 11, 2013 at 11:01 am
      Reply

      Good luck with your search ;)

  5. cookiepuck said on June 11, 2013 at 10:48 am
    Reply
  6. cookiepuck said on June 11, 2013 at 10:35 am
    Reply

    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…

  7. Erik Lundmark said on June 10, 2013 at 11:09 pm
    Reply

    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! :)

  8. beemeup2 said on June 10, 2013 at 9:22 pm
    Reply

    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.

  9. blue_bsod said on June 10, 2013 at 2:48 pm
    Reply

    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.

    1. Martin Brinkmann said on June 10, 2013 at 2:53 pm
      Reply

      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.

  10. cael said on June 10, 2013 at 10:23 am
    Reply

    Nice! thanks!

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.