unocss-scrollbar-variant v0.58.0

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>

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.

Rules

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

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}`
  ],
]

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