unocss-preset-scrollbar

a unocss preset for scrollbar, here is a demo

Installation

npm i unocss-preset-scrollbar unocss -D

Usage

// unocss.config.ts
import { defineConfig, presetAttributify, presetUno } from 'unocss'
import { presetScrollbar } from 'unocss-preset-scrollbar'

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

<div 
  class="scrollbar scrollbar-rounded scrollbar-w-4px scrollbar-radius-2 scrollbar-track-radius-4 scrollbar-thumb-radius-4"
/>

it will generate below css:

/* layer: shortcuts */
.scrollbar::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-height);}
.scrollbar{overflow:auto;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track);--scrollbar-track:#f5f5f5;--scrollbar-thumb:#ddd;--scrollbar-width:8px;--scrollbar-height:8px;--scrollbar-track-radius:4px;--scrollbar-thumb-radius:4px;}
.scrollbar-rounded::-webkit-scrollbar-thumb{border-radius:var(--scrollbar-thumb-radius);}
.scrollbar-rounded::-webkit-scrollbar-track{border-radius:var(--scrollbar-track-radius);}
.scrollbar::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);}
.scrollbar::-webkit-scrollbar-track{background-color:var(--scrollbar-track);}
/* layer: default */
.scrollbar-radius-2{--scrollbar-track-radius:0.5rem;--scrollbar-thumb-radius:0.5rem;}
.scrollbar-thumb-radius-4{--scrollbar-thumb-radius:1rem;}
.scrollbar-track-radius-4{--scrollbar-track-radius:1rem;}
.scrollbar-w-4px{--scrollbar-width:4px;}

you can also use Attributify Mode:

<div
  scrollbar="~ rounded"
/>

or use @apply

import { defineConfig, presetAttributify, presetUno, transformerDirectives } from 'unocss'
import { presetScrollbar } from 'unocss-preset-scrollbar'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
    presetScrollbar({
    }),
  ],
+  transformers: [
+    transformerDirectives(),
+  ],
})

.my-custom-scrollbar {
  @apply scrollbar scrollbar-rounded
}

Configurations

Field	Default	Description
`scrollbarWidth`	`8px`	default scrollbar width
`scrollbarHeight`	`8px`	default scrollbar height
`scrollbarTrackRadius`	`4px`	default scrollbar track radius
`scrollbarThumbRadius`	`4px`	default scrollbar thumb radius
`scrollbarTrackColor`	`#f5f5f5`	default scrollbar track background color
`scrollbarThumbColor`	`#ddd`	default scrollbar thumb background color
`numberToUnit`	value => `${value / 4}rem`	number to unit
`varPrefix`	`''`	the css variable prefix of this preset

for example

<div class="scrollbar scrollbar-w-4">

if we use default options, scrollbar-w-4 will generate --scrollbar-width: 1rem

if we set custom numberToUnit:

export default defineConfig({
  presets: [
    presetUno(),
    presetScrollbar({
      numberToUnit: value => `${value}px`,
    }),
  ],
})

will generate --scrollbar-width: 4px

Utilities

rounded

scrollbar-rounded

Make thumb and track have rounded corners

color

scrollbar-(track|thumb)-color-<color>

set track or thumb background color

size

scrollbar-(radius|w|h|track-radius|thumb-radius)-(\d+?)([a-zA-Z]*?)

type	description
radius	set thumb radius and track radius
w	set scrollbar width
h	set scrollbar height
track-radius	set track radius
thumb-radius	set thumb radius

Attention, if it ends with number, the preset will use numberToUnit to generate length with number as params, Otherwise it will use the captured length information directly

for example:

scrollbar-w-4 will be --scrollbar-width: 1rem
scrollbar-w-4px will be --scrollbar-width: 4px
scrollbar-w-4rem will be --scrollbar-width: 4rem

other

base starter-ts

action-hong / unocss-preset-scrollbar