A Better Firefox Scrollbar

CSS tweaks and settings to improve the Firefox scrollbar

I read this article on how scrollbars are becoming a problem and decided to do something about what I have:

A bad scrollbar, with a thin width and no buttons

5 minutes later, I got a much better scrollbar:

A better scrollbar, with a bigger width and stepper buttons

Note that these steps have only been tested on Linux.

Firefox Settings

  1. Go to about:config in the URL bar.
  2. For a wider scrollbar, set widget.non-native-theme.scrollbar.size.override to the width of your choice.
  3. For a rectangular scrollbar (as opposed to a round one), set widget.non-native-theme.scrollbar.style to 4.

GTK

Edit .config/gtk-3.0/gtk.css, or wherever the GTK config on your machine is:

scrollbar {
    -GtkScrollbar-has-forward-stepper: true;
    -GtkScrollbar-has-backward-stepper: true;
}

This adds the stepper arrows back to the scrollbar.