How to make Firefox scrollbars permanent, thicker

Updated: May 20, 2024

In the past decade, most software user interfaces have undergone a significant degradation in accessibility, usability, and ergonomics. Why? Touch. Middle management saw the usage growth in the mobile space, and they figured, hey, if we replicate the smartphone interfaces onto the desktop, we will get MOAR success. End results, more mouse clicks, more confusing menus, loss of productivity, and then some.

One of the things that irks me is the Firefox scrollbar functionality. It's not consistent on every platform or operating system. Somewhere, you get reasonable default behavior. Elsewhere, you don't. This little tutorial will show you how to improve your Firefox ergonomics, namely always have scrollbars shown, and make them thicker and easier to use with the mouse pointer. Let's start.

Teaser

Problem in more detail

Here's an example, Firefox in Plasma 5 (on top of Kubuntu 22.04). The scrollbars are only visible on mouse hover, and super super tiny. Very thin. A handful of pixels, which makes everyday usage quite annoying, as you need to really focus and aim your mouse pointer carefully.

Thin scrollbars 1

Thin scrollbars 2

Always show scrollbars

This is a relatively simple thing. Open Firefox Settings (or Preferences). In Windows, Menu > Tools > Settings. In Linux, Menu > Edit > Preferences. Go to General > Browsing, and check the box that reads Always show scrollbars. Job done.

Always show scrollbars

Make scrollbars thicker

In some implementations of Firefox, the scrollbars, in addition to being auto-hidden, will be relatively thin. Very hard to "hit" with the mouse pointer. You could argue, hey just use the middle-mouse button. Nope. The usability should be identical, regardless of what pointer device you have or like.

All right. Open Firefox, type about:config. Then, on the configuration editor page, search for the following:

widget.non-native-theme.enabled

Make sure this value is set to true. Next, search for:

widget.non-native-theme.scrollbar.size.override

Change the default value to anything you like, say 10, 20, 30, 50, whatever. Try and see what you like. The change will be immediate. You will not need to restart Firefox to see the results. And that's it, job done!

Thick scrollbars

Conclusion

These two changes are everything you need to make Firefox behave. If your operating system and/or the installation of Firefox does not offer thick, always-visible scrollbars that are easy to use, then you can manually override the browser defaults. You should not let the touch-inspired nonsense frenzy affect your good life and sane, logical usage patterns.

First, you need to show the scrollbars, easily done. Second, you need to dig into the browser configuration and override the size value. By default, it will read 0, but you can use anything you like. And that will restore thick, chunky scrollbars, which are both easily visible and accessible on HD/UHD screens. 1:0 desktop versus touch, how it should be. Hopefully, you will find this guide useful. On to the next challenge. See ya.

Cheers.