Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Aris-t2/Scrollbars

Custom Scrollbars (moved to CustomJSforFx)
https://github.com/Aris-t2/Scrollbars

custom-scrollbar

Last synced: 3 months ago
JSON representation

Custom Scrollbars (moved to CustomJSforFx)

Awesome Lists containing this project

README 

        
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