Skip to content

How to enable wide scrollbars on Firefox

Wesley Branton edited this page Oct 7, 2024 · 1 revision

NOTE: This help page only applies to Firefox users.

Due to technical limitations in the Firefox browser, wide scrollbars cannot be enabled using the Custom Scrollbars add-on in Firefox. For a more detailed explaination behind this, please refer to What is the platform default width.

However, using some advanced settings within Firefox, you can manually adjust the size and other appearance settings of your scrollbars. This help page will walk you through the process.

NOTE: Changing these settings will impact all saved scrollbars that are using the Platform Default width.

How to enable wide scrollbars

1. Opening the configuration editor

The configuration editor is a Firefox tool that can be used to modify every setting, including settings that are not visible on the regular settings screen. This is a very powerful tool for advanced users, but novice computer users may feel intimidated at first. Don't worry because this help will walk you through everything.

If you are interest in learning more about the configuration editor, please refer to the Configuration Editor for Firefox page on the Firefox support website.

To open the configuration editor, open a new tab and type about:config in the address bar. If this is your first time using the configuration editor, you may be greeted by a scary message warning you about the potential risks of using this tool. No worries! None of the settings we will be change will impact the security of Firefox. You can safely press the "Accept Risk and Continue" button to enter the configuraiton editor.

2. Disabling the default scrollbars

The first thing we need to do in the configuration editor is disable Firefox's builtin scrollbar settings. This will allow use to modify additional settings that can change the appearance and size of the scrollbar.

Search for the widget.gtk.overlay-scrollbars.enabled setting. Double-click on the setting or press the toggle button on the right side of the screen to change this setting to false.

3. Changing the scrollbar style (Optional)

Next, we can change the style of scrollbar that we are using. This step is not required if you only want to change the width of your scrollbar. If you don't want to change the style of the scrollbar, you can move to the next section.

Search for the widget.non-native-theme.scrollbar.style setting. Double-click on the setting or press the edit button on the right side of the screen to change this setting to a number between 0 and 5.

But what do these numbers mean? Each number represents a type of computer operating system:

  • 0 is the default value for your computer
  • 1 is macOS
  • 2 is Linux
  • 3 is Android
  • 4 is Windows 10
  • 5 is Windows 11

Changing this setting will have an immediate effect on Firefox, so you can easily open a new tab to test out the settings to see which style you prefer.

NOTE: Some styles may behave differently. The Automatically hide scrollbar setting in the Custom Scrollbars add-on may not work properly with all styles.

4. Changing the scrollbar size

Finally, you can control the size of your scrollbar.

Search for the widget.non-native-theme.scrollbar.size.override setting. Double-click on the setting or press the edit button on the right side of the screen to change this setting to a number. Each scrollbar style may resize differently, so you will want to play around with the width to find number works best for you. A number between 10 and 30 is usually the desired size. Since the settings are applied immediately in Firefox, you can easily experiment.

If your scrollbar is not changing size, you may need to disable an additional setting. By default, Firefox will use the size setting provided by the Windows operating system. This feature can be turned off easily.

Search for the widget.non-native-theme.win.scrollbar.use-system-size setting. Double-click on the setting or press the toggle button on the right side of the screen to change this setting to false.

If your scrollbar is still not changing size or if that setting does not exist, try using a different scrollbar style, as described in the previous section.