More scrollbar CSS variables (followup)

Custom CSS & Theme Design
,
1

I’m posting this here instead of Feature Requests as this concerns CSS variables and developer stuff.

This is a follow-up to my bug report other developers and API post (it was moved) about the CSS variable –scrollbar-bg.

Use case or problem

Styling many important aspects of the scrollbar with just CSS variables is not fully possible. One of the variables in currently broken (see above linked report) and other things like the scrollbar width, height, and thumb color aren’t given variables, so theme developers have to re-declare over the scrollbar selectors to do anything past colors (assuming the broken one is fixed).

To give some context on this, we have three variables for scrollbars currently:

  • --scrollbar-bg: Scrollbar background color (Currently broken)
  • --scrollbar-thumb-bg: Scrollbar thumb background color
  • --scrollbar-active-thumb-bg: Scrollbar thumb background color (active)

These only provide colors, compared to other sets of variables that include sizes.

The reason I this is an issue compared to most other elements is that styling the scrollbar is difficult to understand for most developers. It cannot be easily selected and the definitions are hidden inside app.css with the specific selector of ::-webkit-scrollbar- and in the middle of such definitions.

To help with this, I believe providing the following variables would help greatly:

  • Width (for vertical scrollbars)
  • Height (for horizontal scrollbars)
  • Scrollbar border radius (for the entire scrollbar)
  • Scrollbar thumb border radius (for the thumb)
  • Scrollbar thumb inset/margin (how much space there is on the sides)

Currently, these are set with numbers and cannot be customized. There’s also a small issue where the inset/margin of the scrollbar thumb is inconsistent on each of the sides with the left side having 2 pixels while the right has 3 which looks strange with a background.

Proposed solution

I believe a good solution would be to change many of the scrollbar’s properties into variables.

The relevant app.css rules are located on lines 6523 through 6543.

Here is that section with comments for where each of the proposed variables would go:

/* ^^ Lines 6522 and below ^^ */
body:not(.native-scrollbars) ::-webkit-scrollbar {
  background-color: var(--scrollbar-bg);
  width: 12px;                            /* Could be --scrollbar-width */
  height: 12px;                           /* Could be --scrollbar-height */
  -webkit-border-radius: var(--radius-l); /* Could be --scrollbar-border-radius */
  background-color: transparent; /* NOTE: This is the line breaking --scrollbar-bg and will not be changed/discussed here */
}
body:not(.native-scrollbars) ::-webkit-scrollbar-track {
  background-color: transparent; /* Does not seem to do anything */
}
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-bg);
  -webkit-border-radius: var(--radius-l);  /* Could be --scrollbar-thumb-border-radius */
  background-clip: padding-box;
  border: 2px solid transparent; /* 2px is overwritten on the next line */
  border-width: 3px 3px 3px 2px; /* Could be --scrollbar-thumb-inset */
  min-height: 45px; /* Does not seem important enough for a variable */
}
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  -webkit-border-radius: var(--radius-l); /* Could be --scrollbar-thumb-border-radius or removed? Seems to be unused. */
}
/* vv Lines 6544 and above vv */

There seem to be a few strange points in this.

  • The border radius is set with -webkit-border-radius when other elements seem to favor just border-radius. Changing them to just border-radius seems to have the same effect.
  • There’s the double background-color declaration mentioned in the report about --scrollbar-bg, though I have explained that one in the report linked at the top
  • The declaration on ::-webkit-scrollbar-track seems to do nothing. From small amounts of testing, it seems that the track doesn’t inherently have a color, though I could be wrong.
  • The declaration on ::-webkit-scrollbar-thumb:active seems to do nothing. This rule only has a single re-declaration of the border radius, though it’s set to the same variable meaning it doesn’t really do anything
  • The border set on ::-webkit-scrollbar-thumb is immediately overwritten one line below. As such, it would be more clear to remove the pixel value. The solid is still required as of testing it.

Here is a proposed revision with the variables added and a body example of the defaults:

/* Just here as an example of variables */
body {
  --scrollbar-bg: lightblue;    /* Example color, use the existing value for non-testing purposes */
  --scrollbar-thumb-bg: purple; /* Example color, use the existing value for non-testing purposes */
  --scrollbar-width: 12px;
  --scrollbar-height: 12px;
  --scrollbar-border-radius: var(--radius-l);
  --scrollbar-thumb-border-radius: var(--radius-l);
  --scrollbar-thumb-inset: 2px 2px 2px 3px; /* IMO should just be 2px */
}

body:not(.native-scrollbars) ::-webkit-scrollbar {
  background-color: var(--scrollbar-bg);
  width: var(--scrollbar-width);                           /* CHANGED now a variable */
  height: var(--scrollbar-height);                          /* CHANGED now a variable */
  -webkit-border-radius: var(--scrollbar-border-radius);   /* CHANGED now a variable */
  background-color: transparent; /* NOTE: This is the line breaking --scrollbar-bg and will not be changed/discussed here */
}
body:not(.native-scrollbars) ::-webkit-scrollbar-track {
  /* REMOVED */
}
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-bg);
  -webkit-border-radius: var(--scrollbar-thumb-border-radius);  /* CHANGED now a variable */
  background-clip: padding-box;
  border: solid transparent;                                    /* CHANGED removed 2px */
  border-width: var(--scrollbar-thumb-inset);                   /* CHANGED now a variable */
  min-height: 45px; /* Does not seem important enough for a variable */
}
body:not(.native-scrollbars) ::-webkit-scrollbar-thumb:active {
  /* REMOVED */
}

It might also be helpful to add a note on the scrollbar page about how to style past the variables since it’s very hard to find information on scrollbars due to not being clickable.

3 Likes