unocss-scrollbar-variant

Scrollbar Preset for UnoCSS. Allows unocss utility classes to be used on scrollbars using variants. This also adds rules to level 1 CSS scrollbar styling (for firefox compatibility).

Installation

pnpm add unocss-scrollbar-variant -D

Usage

// unocss.config.js
import { defineConfig, presetUno } from 'unocss'
import { presetScrollbar } from 'unocss-scrollbar-variant'

export default defineConfig({
  presets: [
    presetUno(), // required
    presetScrollbar(),
  ],
})

<div class="overflow-auto
  scrollbar:w-2
  scrollbar:h-2
  scrollbar-thin
  scrollbar-thumb:rounded
  scrollbar-track:bg-gray-200
  scrollbar-thumb:bg-gray-400
  scrollbar-track-gray-200
  scrollbar-thumb-gray-400
  hover:scrollbar-thumb:bg-gray-600
  hover:scrollbar-thumb-gray-600">
</div>

Utility | Webkit (Chrome) | CSS Level 1 (Firefox) -------------------- | ---------------------------- | --------------------- w-2 | scrollbar:w-2 | scrollbar-thin h-2 | scrollbar:h-2 | scrollbar-thin bg-{color} (thumb) | scrollbar-thumb:bg-{color} | scrollbar-thumb-{color} bg-{color} (track) | scrollbar-track:bg-{color} | scrollbar-track-{color} rounded (thumb) | scrollbar-thumb:rounded | N/A border (thumb) | scrollbar-thumb:border-1 | N/A rounded left (thumb) | scrollbar-thumb:rounded-l | N/A any unocss utility | scrollbar-{part}:{utility} | N/A

Due to CSS limitations firefox can only adjust the thumb and track color and their widths.

Variants

These variants allow adjustment of any scrollbar element in a webkit browser.

Variant | Element ------------------------ | ------------------- scrollbar: | the whole scrollbar resizer: | resizer handle scrollbar-track: | scrollbar track scrollbar-track-piece: | scrollbar track piece scrollbar-thumb: | scrollbar thumb scrollbar-corner: | scrollbar corner scrollbar-button: | scrollbar button

Rules

The rules adjust scrollbars in CSS level 1 compliant browsers (firefox). They are severly limited compared to webkit's implementation.

Rule | Application ------------------------- | --------------- scrollbar-thin | scrollbar width scrollbar-none | scrollbar width scrollbar-auto | scrollbar width scrollbar-thumb-{color} | unocss color applied to the thumb scrollbar-track-{color} | unocss color applied to the track

Cross Browser Shortcut Examples

[
  { 'scrollbar-thin-all': `scrollbar:w-2 scrollbar:h-2 scrollbar-thin` },
  [
    /^scrollbar-bg-(track|thumb)-(.*)$/,
    ([, section, color]) => `scrollbar-${section}:bg-${color} scrollbar-${section}-${color}`
  ],
]

Shortcut | Application ---------------------------- | ----------- scrollbar-thin-all | scrollbar:w-2 scrollbar:h-2 scrollbar-thin scrollbar-bg-track-{color} | scrollbar-track:bg-{color} scrollbar-track-{color} scrollbar-bg-thumb-{color} | scrollbar-thumb:bg-{color} scrollbar-thumb-{color}

These shortcuts allows the initial 10 class example to be changed to the following 5 classes

<div class="overflow-auto
  scrollbar-thumb:rounded
  scrollbar-thin-all
  scrollbar-bg-track-gray-200
  scrollbar-bg-thumb-gray-400
  hover:scrollbar-bg-thumb-gray-600">
</div>

Note: The rounded thumb part only applies to webkit based browsers

Useful Standard Variants

It is likely you wish to style every scrollbar on your site the same. To accomplish this easily you can chain standard variants similar to the hover variant in the example. Of specific note, the all variant E.G.

all:scrollbar-track:bg-gray-200