Skip to content

Latest commit

 

History

History
117 lines (92 loc) · 3.74 KB

README.md

File metadata and controls

117 lines (92 loc) · 3.74 KB
Raw

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