[Tip] Enable / Disable Windows 11 Style Overlay Scrollbars in Mozilla Firefox

New versions of Mozilla Firefox web browser (version 97 and later) come with Windows 11 style overlay scrollbars. This article will help you in enabling or disabling overlay scrollbars feature in Firefox.

Overlay scrollbars is a new type of scrollbars introduced in Windows 11 operating system. Overlay scrollbar displays in a minimal form using a very thin bar without up and down arrows at top and bottom. When the user hovers the mouse cursor over the scrollbar, it displays the full scrollbar with arrows. So basically the new overlay scrollbar comes with auto-hidden attribute and shows and hides upon mouse cursor movement.

The official changelog of Firefox 97.0 version states that “Firefox now supports and displays the new style of scrollbars on Windows 11” but after upgrading to latest 97 version in one of my Windows 11 devices, I noticed that Firefox was not using new native overlay scrollbars. It was still using old style scrollbars as shown in following screenshot:

Advertisement

Default_Old_Classic_Full_Scrollbars_Mozilla_Firefox_UI.png

I opened about:config page (advanced configuration page for experts) and searched for Windows 11 overlay scrollbars and I noticed following preference/flag which was new in Firefox 97 version:

widget.non-native-theme.win11.scrollbar.force-overlay-style

The preference was set to False. I changed the preference to True and it immediately replaced the scrollbars to Windows 11 style overlay scrollbars as shown in following screenshot:

New_Windows_11_Style_Minimal_Overlay_Scrollbars_Mozilla_Firefox_UI.png

So the “widget.non-native-theme.win11.scrollbar.force-overlay-style” flag decides whether Firefox should use new Windows 11 style native overlay scrollbars or use the old classic full scrollbars in its UI.

If you want to turn on/off Windows 11 style overlay scrollbars in Firefox 97 and later versions, following steps will help you:

Advertisement

1. Open Firefox and type about:config in the address bar and press Enter. It’ll show you a warning message, click on “Accept the Risk and Continue” button. It’ll open Firefox’s hidden secret advanced configuration page i.e. about:config page.

2. Now type win11 in Search filter box and look for following preference in the window:

widget.non-native-theme.win11.scrollbar.force-overlay-style

Enable_Disable_Windows_11_Style_Native_Overlay_Scrollbars_Mozilla_Firefox_UI.png

3. To enable new Windows 11 style overlay scrollbars in Firefox, double-click on the above mentioned preference and change its value to true.

To disable Windows 11 style overlay scrollbars in Firefox, double-click on the above mentioned preference and change its value to false.

That’s it. It’ll immediately enable/disable Windows 11 style overlay scrollbars in Mozilla Firefox.

UPDATE: Restoring Windows 10 Style Full Scrollbars in Firefox

I just noticed that if we change the value of widget.non-native-theme.scrollbar.style preference to 4 using about:config, it restores full Windows 10 style scrollbars in Firefox. By default, the value of this preference is set to 0. The value 1 sets the scrollbars to macOS style, a value of 2 sets the scrollbars to GTK style, a value of 3 sets the scrollbars to Android style, a value of 4 sets the scrollbars to Windows 10 style and a value of 5 sets the scrollbars to Windows 11 style. The value 0 (default) sets the scrollbars to current OS or platform style.

More Info: [Tip] Restore Full Classic Scrollbars in Mozilla Firefox on Windows 11

Also Check:

[Tip] Enable Windows 11 Style Overlay Scrollbars in Microsoft Edge

[Tip] Enable or Disable Windows 11 Style Menus and UI in Chrome and Edge

[Tip] New Working Method to Restore Classic Theme and UI in Firefox 91 and Later Versions

Published in: Mozilla Firefox

About the author: Vishal Gupta (also known as VG) has been awarded with Microsoft MVP (Most Valuable Professional) award. He holds Masters degree in Computer Applications (MCA). He has written several tech articles for popular newspapers and magazines and has also appeared in tech shows on various TV channels.

Comments

NOTE: Older comments have been removed to reduce database overhead.

  1. “I just noticed that if we change the value of widget.non-native-theme.scrollbar.style preference to 4 using about:config, it restores full Windows 10 style scrollbars in Firefox.”

    Worked! Thank you so much! Really appreciated.

Leave a Comment

Your email address will not be published. Required fields are marked *

NOTE: Your comment may not appear immediately. It'll become visible once we approve it.