The built-in support tool added in pull request #8 was a great addition at the time because there were a lot of issues that could go wrong. However, with the removal of the Firefox preferences that caused these problems (see issue #17), there's not really anything that can go wrong in terms of settings.

Basically, the only issue currently is Private Browsing mode, which is already indicated at the top of the add-on settings page. This kind of renders the support page useless.

At this point, it can probably be removed from the add-on. It has served its purpose.

Icons should be added to the options page to better indicate what part of the scroll bar each colour slider applies to. This can also help non-English users better understand and use the extension.

The add-on branding is not great. It's not really visually appealing and it doesn't do a good job showing what the add-on does. When the add-on is released to other browsers, I want the branding to be updated to include a brand new icon.

Anyone have any luck with YouTube in Firefox? I still have their new skinny pathetic scroll bar and no color change...

Currently, the extension only checks if it's running on Chromium or Firefox. The add-on should be able to detect what type of Chromium browser it's running on as well.

On Firefox install, Custom-Scrollbar add-on icon is not displayed in the top-right area, but it is displayed on Edge or Chrome.
Is it a just simple mistake? To change the Custom-Scrollbar setting, it is reqired that the add-on icon is displayed on the top-right area.

Currently, all colors need to be entered in hexadecimal format with an alpha channel. However, it may be useful to allow the user to enter a color in different formats as well, such as RGBA or HSLA.

Currently, the readme for the repository is pretty limited about how you can contribute to the project. Including information about ways to contribute other than developing (for example, filing bugs) would be useful.

Please make Chrome version of this, It'd be very useful and there is not addon available with ability to hide the scrollbar.

Before the add-on can be released to other browsers, the wiki must be updated to provide steps for Chromium-based internet browsers.

Hi, I was trying to set a hex color for both types in the preferences of the custom-scrollbar. However, when I click the "save" button, it reverts everthing back to the defaults. May you manage somehow to fix this bug ?

To replicate the bug : tap '#00ff00' in one of the field, click enter and press the 'save' button.

At the bottom of the Custom Scrollbars Options page is a link to the support wiki with 4 issues solved. The bottom 2 are applicable for me as this addon wasn't working (except on the actual options page). So I took a look at "Custom colors are not applied" and "Custom width is not applied". Both instructions appear to be out of date as about:config no longer contains the preferences "layout.css.scrollbar-color.enabled" or "layout.css.scrollbar-width.enabled". It doesn't have anything which includes "layout.css.scrollbar".

The problem that brought me here is the width being set to "thin" on what appears to be random web pages I visit while using my default browser, Firefox. Sometimes, the scroll bar would also be very large (on YouTube) and would not subside after setting the video to full-screen. I was hoping this addon can fix this issue as it appears I am running out of options.

An option someone posted on the Mozilla forums was to place a "chrome" folder inside the Profile Folder and create a "userContent.css" inside of that. Then paste in that file:
*{scrollbar-color:auto!important; scrollbar-width:auto!important;}
That also did not work.

Anyways, thanks for reading. I very much wish you the best of luck as I don't see any other addon or anyone else tackling what seems to me, a VERY annoying problem.

Cheers

Users should be able to save different groups of settings (profiles). This will give the ability for the user to easily change between two groups of settings. This would also be a good way to eventually implement a "per website" system (see #10), which has been requested for some time.

CURRENT STORAGE STRUCTURE:

• width
• colorTrack
• colorThumb
• allowOverride
• customWidthValue
• customWidthUnit

NEW STORAGE STRUCTURE:

• schema
• defaultProfile
• profile_TIMESTAMP
  • name
  • width
  • colorTrack
  • colorThumb
  • allowOverride
  • customWidthUnit
  • customWidthValue

Users who speak different languages may have a better time using the add-on if it were localized. While I'm not sure if anyone would actually be willing to help translate the add-on, it wouldn't really hurt to have the add-on set up to use i18n functions that web extensions offer.

While the AMO website currently allows developers to submit a text-based privacy policy, it appears that other add-on distribution platforms may want the privacy policy to be hosted online somewhere.

The privacy policy could be hosted on my own server and domain, but it may be better to have it hosted on the GitHub wiki or in a markdown file on the GitHub repo.

It's not like the privacy policy is difficult to make. Privacy policies are quite easy when you don't collect any user data (other services should take not of that (: ). But that will need to be done before the add-on can be uploaded to other add-on distribution platforms.

The user should be able to quickly change profiles using the toolbar button. That will change the behaviour of the browserAction button to use a popup menu instead.

This will work best if the add-on is able to update the CSS on pages without forcing the user to reload (see #25).

Given that Opera is a Chromium-based browser, it should be easy to port the extension to Opera after it's working in Google Chrome (see #13).

There is an Opera-specific issue that will need to be included in the documentation for the add-on and possibly the troubleshooter page. The browser has a setting that, by default, prevents add-ons from accessing and modifying search results pages. That is likely to cause confusion for users.

The user should be given a first-run page that can explain a bit about the extension and help detect issues where the about:config options to enable scrollbar CSS have been disabled. This could be done by adding a sample on the page and telling the user to click a button if they don't see the custom buttons so that the help page about how to change the necessary about:config options is displayed.

When the add-on is first installed, the options page is being opened before the settings are initialized. This is causing the settings page to break until the user reloads it.

The add-on needs to wait to open the options page until the storage has been initialized properly.

I was hoping for a larger scrollbar. This add on was a waste of my time and disk space!Uninstalling.

In an effort to make the content of the internet more accessible to everyone, all of my repositories will be reviewed to ensure that they fulfil the WCAG 2.2 requirements. This will take time. The current goal is to make all projects comply with level AA, including as many level AAA standards as possible.

Items that are bold are new to WCAG 2.2. Items that do not apply to the project will be marked as completed and marked with a strikethrough.

Guideline 1.1 – Text Alternatives

• 1.1.1 - Non-text Content (A)

Guideline 1.2 – Time-based Media

• 1.2.1 - Audio-only and Video-only (Prerecorded) (A)
• 1.2.2 - Captions (Prerecorded) (A)
• 1.2.3 - Audio Description or Media Alternative (Prerecorded) (A)
• 1.2.4 - Captions (Live) (AA)
• 1.2.5 - Audio Description (Prerecorded) (AA)
• 1.2.6 - Sign Language (Prerecorded) (AAA)
• 1.2.7 - Extended Audio Description (Prerecorded) (AAA)
• 1.2.8 - Media Alternative (Prerecorded) (AAA)
• 1.2.9 - Audio-only (Live) (AAA)

Guideline 1.3 – Adaptable

• 1.3.1 - Info and Relationships (A)
• 1.3.2 - Meaningful Sequence (A)
• 1.3.3 - Sensory Characteristics (A)
• 1.3.4 - Orientation (AA)
• 1.3.5 - Identify Input Purpose (AA)
• 1.3.6 - Identify Purpose (AAA)

Guideline 1.4 – Distinguishable

• 1.4.1 - Use of Color (A)
• 1.4.2 - Audio Control (A)
• 1.4.3 - Contrast (Minimum) (AA)
• 1.4.4 - Resize text (AA)
• 1.4.5 - Images of Text (AA)
• 1.4.6 - Contrast (Enhanced) (AAA)
• 1.4.7 - Low or No Background Audio (AAA)
• 1.4.8 - Visual Presentation (AAA)
• 1.4.9 - Images of Text (No Exception) (AAA)
• 1.4.10 - Reflow (AA)
• 1.4.11 - Non-text Contrast (AA)
• 1.4.12 - Text Spacing (AA)
• 1.4.13 - Content on Hover or Focus (AA)

Guideline 2.1 – Keyboard Accessible

• 2.1.1 - Keyboard (A)
• 2.1.2 - No Keyboard Trap (A)
• 2.1.3 - Keyboard (No Exception) (AAA)
• 2.1.4 - Character Key Shortcuts (A)

Guideline 2.2 – Enough Time

• 2.2.1 - Timing Adjustable (A)
• 2.2.2 - Pause, Stop, Hide (A)
• 2.2.3 - No Timing (AAA)
• 2.2.4 - Interruptions (AAA)
• 2.2.5 - Re-authenticating (AAA)
• 2.2.6 - Timeouts (AAA)

Guideline 2.3 – Seizures and Physical Reactions

• 2.3.1 - Three Flashes or Below Threshold (A)
• 2.3.2 - Three Flashes (AAA)
• 2.3.3 - Animation from Interactions (AAA)

Guideline 2.4 – Navigable

• 2.4.1 - Bypass Blocks (A)
• 2.4.2 - Page Titled (A)
• 2.4.3 - Focus Order (A)
• 2.4.4 - Link Purpose (In Context) (A)
• 2.4.5 - Multiple Ways (AA)
• 2.4.6 - Headings and Labels (AA)
• 2.4.7 - Focus Visible (AA)
• 2.4.8 - Location (AAA)
• 2.4.9 - Link Purpose (Link Only) (AAA)
• 2.4.10 - Section Headings (AAA)
• 2.4.11- Focus Appearance (Minimum) (AA)
• 2.4.12 - Focus Appearance (Enhanced) (AAA)
• 2.4.13 - Fixed Reference Points (A)

Guideline 2.5 – Input Modalities

• 2.5.1 - Pointer Gestures (A)
• 2.5.2 - Pointer Cancellation (A)
• 2.5.3 - Label in Name (A)
• 2.5.4 - Motion Actuation (A)
• 2.5.5 - Target Size (AAA)
• 2.5.6 - Concurrent Input Mechanisms (AAA)
• 2.5.7 - Dragging (AA)
• 2.5.8 - Pointer Target Spacing (AA)

Guideline 3.1 – Readable

• 3.1.1 - Language of Page (A)
• 3.1.2 - Language of Parts (AA)
• 3.1.3 - Unusual Words (AAA)
• 3.1.4 - Abbreviations (AAA)
• 3.1.5 - Reading Level (AAA)
• 3.1.6 - Pronunciation (AAA)

Guideline 3.2 – Predictable

• 3.2.1 - On Focus (A)
• 3.2.2 - On Input (A)
• 3.2.3 - Consistent Navigation (AA)
• 3.2.4 - Consistent Identification (AA)
• 3.2.5 - Change on Request (AAA)
• 3.2.6 - Findable Help (A)
• 3.2.7 - Hidden Controls (AA)

Guideline 3.3 – Input Assistance

• 3.3.1 - Error Identification (A)
• 3.3.2 - Labels or Instructions (A)
• 3.3.3 - Error Suggestion (AA)
• 3.3.4 - Error Prevention (Legal, Financial, Data) (AA)
• 3.3.5 - Help (AAA)
• 3.3.6 - Error Prevention (All) (AAA)
• 3.3.7 - Accessible Authentication (A)
• 3.3.8 - Redundant Entry (A)

Guideline 4.1 – Compatible

• 4.1.1 - Parsing (A)
• 4.1.2 - Name, Role, Value (A)
• 4.1.3 - Status Messages (A)

When the browser starts up, the CSS based on the user's settings do not appear to be applied to all of the open tabs. The user needs to refresh the tab or trigger a CSS update to get the new CSS loaded onto the page.

I'm only able to reproduce this issue on Firefox. It was an issue that was happening prior to the rework to how the CSS is handled, so it doesn't appear to be related to those changes.

The add-on will soon be ready for localization (see #27). There needs to be a user-friendly way to allow users to help translate the add-on, as I don't really trust online translation tools to get it 100% correct.

Obviously, the localization messages will be editable on GitHub, but that's not really a user-friendly way to allow people to contribute, since it requires some knowledge of JSON formatting and GitHub. It would be far better to have some kind of localization platform deployed (kind of like Mozilla Pontoon) so that users can easily translate content.

There are also some localization messages that will appear on the landing page, which don't appear on GitHub because the landing page is not hosted here.

There are some good options for small projects, like Localazy (freemium) or Crowdin (free plans for open source). Alternatively, I could also make a localization platform of my own (although I'd prefer to use a third-party one).

A new documentation page needs to be added to explain the support for custom widths on Chromium-based browsers. See #53.

The current library that's being used for the color picker on the options page is good, but it uses JavaScript's innerHTML property which throws a warning every time the add-on is published to AMO. It doesn't impact the review process, but other browser add-on platforms may not allow it or may take longer to review it or may not allow it at all.

The library used should be changed to another open source library that does not make use of innerHTML.

As recommended by this user, consider the possibility of adding an option to override specific websites with different settings.

PROS

• Allows more control over customization
• Allows users to fix site-specific issues with scroll bars

CONS

• Increases Storage API data size
• May significantly increase page loading time

PSEUDOCODE FOR RULE LOADING PROCESS:

domainParts = window.location.hostname split by "."
index = 0
while index < domainParts.length - 1
	domain = ""
	foreach domainPart starting at index
		domain += "." + domainPart

	if index = 0
		domain -= first character
	else
		domain += "*" to front
	
	if domain in rules
		return rule
	else
		index += 1
return default rule

CURRENT STORAGE STRUCTURE:

• schema
• defaultProfile
• profile_TIMESTAMP
  • ...

NEW STORAGE STRUCTURE:

• schema
• defaultProfile
• profile_TIMESTAMP
  • ...
• rules
  • domain

TODO

• Wiki documentation
• Update page

So I have round scrollbars on Firefox on my system by default (Ubuntu), however when I choose the option to set custom colors then, the scrollbar only allows for me to choose square scrollbars. I am unable to have custom colors with the default rounded scrollbar. What could be causing the issue?

Thanks in advance.

Hi, I would like to be able to set the width of the scrollbar's track, so that it'd fit nicely with my theme :)

Thanks in advance.

A change potentially needs to be made to the add-on's builtin troubleshooter. A note needs to be added to the wiki about the missing preference in newer versions.

On the plus side, this change should virtually eliminate issues with the add-on not working properly for some users that don't have the preference set properly.

The scrollbars on <select> HTML elements are not customized. Instead of the system default one appears.

In order to make the design more consistent, it would look better if the custom scrollbar was applied to Firefox sites as well (sites like the start page, settings page, add-ons page). Is that possible?

Many users have suggested adding the option to auto-hide the scroll bar until the user starts scrolling or moves their mouse to the edge of a scrollable element. However, I believe the current options that Firefox allows make this type of option impossible.

PROS

• Maximizes screen area while still letting the user access the scroll bar when required

CONS

• Could potentially cause annoying text wrapping changes when the scroll bar is toggled
• May require an event listener on every element of a page, which has significant performance drawbacks

I'd like to translate this add-on to Dutch. Could you add the Dutch language on Crowdin, please? 🙂

It looks like Chromium-based browsers possibly don't require the broad host permission or activeTab permissions. Having those unnecessary permissions included will dramatically slow down the review time on other browser platforms, so if it's not needed, it should be removed from the manifest for Chromium.

I tried changing the scrollbar track channel to 100% transparent in order to make a "floating" scrollbar, but all this seems to do is set the track color to the default background color of the webpage. While this doesn't seem like a big difference, it means that if the page has one or more full-width headers (for example the dark gray and light gray headers across the top of Github), the scrollbar doesn't float and instead appears to have a white track.

It's a minor bug, and probably not a fixable one, but would it make more sense to remove the alpha channel from hex code color options? (or if not feasible, at least add a message by the color picker clarifying that scrollbars do not have transparency?)

I would love to be able to choose the width in pixels instead of Default/thin options.

I also wonder if it's possible to have thumb and track with same width (to avoid the pixel column in right and left of thumb).

Right now I have this scrollbar :

And I would like to have something like I have with Chrome :

A banner should be displayed on the user's options page to let them know if they have not given the add-on permission to run in Private Browsing mode. A "learn more" button can be added to direct the user to help page with an explanation and instructions.

With the addition of settings profiles and eventually website-specific settings, the data stored in the Storage API is becoming more complex. It would be a good idea to allow the user to save a backup (as a JSON file) and be able to restore from a backup. This would also make it easy for users to transfer settings between computers.

The spec that Chromium-based browsers are using to set the scrollbar width supports custom measurements (meaning the user could specify 20px, for example). An "other" or "custom" option should be added to the scrollbar width section in the add-on options that allows the user to enter a custom measurement.

This option will need to be limited to Chromium-based browsers only because the spec that Firefox uses does not currently support this.

I don't use your extension to customize scrollbars, but rather to uncustomize the wretched and unusable scrollbars that certain Web sites insist on foisting on their users - unfortunately, today Tumblr joined that "wretched and unusable" category, but your extension fails to affect that site.

In the settings, there is a the Default option for width. The naming of this setting has confused some people. It was originally named Default because it's supposed to show the default OS scrollbar style.

It will also likely confuse people with the move to Chromium because the add-on will completely override the default scrollbar on those browsers.

It should be changed to "wide".

It should be explored whether or not it's possible to update the scrollbars on pages without the user having to reload the page. Given some changes that may need to be made to port the extension to Chromium-based browsers, it may become possible to live update the CSS that controls the scrollbars.

I'm a person with disabilities and Custom Scrollbar is extremely useful. It works great with Facebook.

But with the Synology interface, it's no change. I can't get it how they inject the code, but the scrollbars doesn't change as set in Custom Scrollbar. I hope you can do something about it.

Thank you,
Lucian

In an individual cam page on Chaturbate site: The chat text box for sending chat text has the horizontal scrollbars added, preventing sending text. There should be no scrollbars in that one or any site text boxes. There needs to be a webpage whitelist feature or some added code to stop adding bars to a webpage text box.

In order to get users to help with the localization process, there needs to be better documentation on how to help. That documentation should be on the Wiki and the Readme. It would probably be a good idea to have a call to action for users that are running Firefox in a different language.

A visual preview of what the scroll bar will look like should be added to the options menu so that the user can see what it looks like without reloading any tabs.

The current options (default, thin, hidden) will always override the scrollbar width. An option should be added to the settings that will allow websites to control the width of the scrollbar.

This can be done by adding a "no override" setting to the add-on options. It can be explored whether or not this should be set as the default when the add-on is first installed.

An alternative would be to change the current "default" option to "wide" (or something similar) and migrate users that currently have the "default" option set to the new "wide" option. The "default" option could then be changed to not override the user's settings.

An update popup notice page might be a good idea for this update.

A settings profile system has been added to the add-on (see #56). This feature needs some documentation on the wiki.

Now that Microsoft Edge is based on Chromium, it should be fairly easy to port the extension to MS Edge after it's working on Google Chrome (see #13).

If the user checks the popup to allow Firefox to run the add-on in Private Browsing mode, the options page that first appears on the first installation is closed. This is because granting/denying Private Browsing access triggers an update event.

This issue can be corrected by opening the options dialog in the first install and any time the add-on updates by the previous version information matches the current version.