--- title: Scrollbar --- {% include_relative includes/_header.html %}

Description

Attempts to unify the (relatively) new CSS standard scrollbar-width: *; (MDN) and scrollbar-color: * *; (MDN) with the non-standard, but comically much better supported,::-webkit-scrollbar styles (MDN).

Accessibility Concern

Use this property with caution — setting scrollbar-width to thin or none can make content hard or impossible to scroll if the author does not provide an alternative scrolling mechanism. While swiping gestures or mouse wheels can enable scrolling on such content, some devices have no scroll alternative.

MDN

Setup

tailwind.config.js
const { Scrollbar } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  plugins: [Scrollbar],
  theme: {
    colors: {
      "grey-15": "#d9d9d9",
      "red-01": "#f00"
    },
    scrollbar: {
      track: {
        "primary": "#ADD8E6"
      },
      thumb: {
        primary: "#004F91"
      }
    }
  }
  ...
};

Demo

For reference, an example of standard scroll bars:

You may need to show scrollbars in your operating system settings, but then as a web developer, you already had your scrollbars always visible, didn't you? 😉

The following demos show horizontal scrollbars - the styles will apply to scrollbars in both directions.

Thin scrollbars

Attempts to unify scrollbar-width: thin; (MDN) and the corresponding ::-webkit-scrollbar styles.

On this plugin authors Mac, running Mac OS Big Sur and FireFox 95 - scrollbar-width: thin; draws a scrollbar that is 10px wide with a 2px internal padding.

And so, as well as setting scrollbar-width: thin;, scrollbar-thin alters the scrollbars to match those numbers.

document.html
<div class="scrollbar-thin">...</div>

Thin scrollbars - collapsed

scrollbar-thin-collapse takes advantage of the ability to collapse the padding around the scrollbar thumb for browsers that support ::-webkit-scrollbar. For other browsers, this sets scrollbar-width: thin; as above.

document.html
<div class="scrollbar-thin-collapse">...</div>

Hidden scrollbars

Possible, using scrollbar-none, unifies scrollbar-width: none; and the equivalent ::-webkit-scrollbar display: none;.

document.html
<div class="scrollbar-none">...</div>

Scrollbar colours

Attempts to unify scrollbar-color: * *; (MDN) and the corresponding ::-webkit-scrollbar styles.

Scrollbar track colour

Scrollbar track colour takes its values from your Tailwind config colors. It creates classes from theme.colors and theme.scrollbarColor.track and also name spaced and theme.backgroundColor.

From theme.theme.scrollbar.trackColor, using the config in this document:

document.html
<div class="scrollbar-track-primary">...</div>

Scrollbar thumb colour

Scrollbar track colour takes its values from your Tailwind config colors. It creates classes from theme.colors and theme.scrollbarColor.thumb and also name spaced and theme.backgroundColor.

From theme.theme.scrollbar.thumbColor, using the config in this document:

document.html
<div class="scrollbar-thumb-primary">...</div>

Combining scrollbar- classes

Variations of combinations of scrollbar-thin/scrollbar-thin-collapsed, scrollbar-track-* and scrollbar-thumb-*

Using scrollbar-track-* and scrollbar-thumb-*:

document.html
<div class="scrollbar-track-primary scrollbar-thumb-primary">...</div>

Using scrollbar-thin, scrollbar-track-* and scrollbar-thumb-*:

document.html
<div class="scrollbar-thin scrollbar-track-primary scrollbar-thumb-primary">...</div>

Using scrollbar-thin-collapse, scrollbar-track-* and scrollbar-thumb-*:

document.html
<div class="scrollbar-thin-collapse scrollbar-track-primary scrollbar-thumb-primary">...</div>

Using theme.colors tokens as colour names:

document.html
<div class="scrollbar-thin-collapse scrollbar-track-grey-15 scrollbar-thumb-red-0">...</div>

Using theme.backgroundColor tokens as colour names, note the bg- colour name prefix:

document.html
<div class="scrollbar-thin-collapse scrollbar-track-bg-column scrollbar-thumb-bg-column-alt">...</div>
{% include_relative includes/_footer.html %}