Custom Scrollbars for Firefox Quantum (57+)

[ Download ]

Both available methods use the same JavaScript code to customize scrollbars. They only differ in the way Firefox loads custom JavaScipt files.

Want to support this project?

[ Paypal Me ]

Method 1 - files for Firefox profile folder only

M1 is based on this project by nuchi: https://github.com/nuchi/firefox-quantum-userchromejs
M1 will stop working when Mozilla drops XBL support.

From this projects \method 1\ folder copy userChrome folder and userChrome.css file to \ PROFILENAME \chrome\ or add code from userChrome.css file to an existing userChrome.css file.

Method 2 - files for Firefox installation folder and Firefox profile folder

M2 is based on this project by ardiman: https://github.com/ardiman/userChrome.js
M2 is also based on the modified files by Endor8: https://github.com/Endor8/userChrome.js/

From this projects \method 2\profile\ folder copy userChrome folder and userChrome.js file to \ PROFILENAME \chrome\ folder.

From this projects \method 2\firefox\ folder copy defaults folder and config.js file to Firefox main directory (where the Firefox executable is).

With beta and release versions of Firefox 62+ an additional preferences pref("general.config.sandbox_enabled", false); has to be set inside config-prefs.js file. This is considered less secure by Mozilla and is only a temporary workaround, but at the moment it is the only way to run custom scripts using "methode 2".

Script/startup cache must be deleted after every change!

M2 method (now) uses userChrome.ignoreCache = true; inside userChrome.js file and clears the script/startup cache automatically.
Where to find startupCache folder?
about:profiles > Local Directory > Open Folder, close Firefox and delete all files in startupCache folder.

Location on WINDOWS: C:\Users\ NAME \AppData\Local\Mozilla\Firefox\Profiles\ PROFILE \startupCache
Location on LINUX location: \home\ NAME \.cache\mozilla\firefox\ PROFILE \startupCache

This is not the same profile folder custom scripts and styles are stored!

More info about startup cache removal (in German): https://github.com/ardiman/userChrome.js/wiki/Skriptcache
More info about startup cache removal (in English [Google translation]): https://translate.googleusercontent.com/translate_c?act=url&depth=1&ie=UTF8&prev=_t&rurl=translate.google.com&sl=auto&sp=nmt4&tl=en&u=https://github.com/ardiman/userChrome.js/wiki/Skriptcache

Where to find Firefox profile folder for styles and scripts?

1. Find your profile folder.
about:profiles > Root Directory > Open Folder
or about:support > Profile Folder > Open Folder
or Shift+F2 to open Firefox's command line, then enter the command folder openprofile

2. User styles belong into \chrome\ folder. Create it, if there is none yet.
\ PROFILENAME \chrome\

3. Copy files and folders into \chrome\ sub-folder so the results look like this:
\ PROFILENAME \chrome\userChrome\ (method 1 and 2)
\ PROFILENAME \chrome\userChrome.css (method 1)
\ PROFILENAME \chrome\userChrome.js (method 2)

Customize scrollbars

Open \chrome\userChrome\custom_scrollbars.uc.js with any text editor (Notepad++ recommended on Windows).
Follow instruction inside custom_scrollbars.uc.js on how to modify scrollbar attributes and appearance.

What features does this project offer?

- hide scrollbars
- hide scrollbar buttons
- floating scrollbars (on top of web content)
- custom scrollbar size
- custom scrollbar opacity
- custom scrollbar background color / background image for color gradient
- custom scrollbar corner background color / background image for color gradient
- custom scrollbar thumb color / background image
- custom scrollbar hovered-thumb color / background image for color gradient
- custom scrollbar thumb roundness / border-radius
- custom scrollbar thumb border width
- custom scrollbar thumb border color
- custom scrollbar button color / background image for color gradient
- custom scrollbar hovered-button color / background image for color gradient
- custom scrollbar button roundness / border-radius / arrow