unocss-preset-scrollbar

 !npm

unocss 的滚动预设，一个简单的实例

简体中文 | English

安装

``bash
npm i unocss-preset-scrollbar unocss -D
`

使用

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

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

`html
class="scrollbar scrollbar-rounded scrollbar-w-4px scrollbar-radius-2 scrollbar-track-radius-4 scrollbar-thumb-radius-4"
/>
`

上述代码将生成如下的 css 代码：

`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;}
`

你也可以使用 Attributify Mode：

`html
scrollbar="~ rounded"
/>
`

或者使用 @apply

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

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

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

配置

|配置项|默认值|说明|
|--|--|--|
|scrollbarWidth|8px|默认的滚动条宽度|
|scrollbarHeight|8px|默认的滚动条高度|
|scrollbarTrackRadius|4px|默认的滚动条轨迹的圆角|
|scrollbarThumbRadius|4px|默认的滚动条滑块的圆角|
|scrollbarTrackColor|#f5f5f5|默认的滚动条轨迹的背景色|
|scrollbarThumbColor|#ddd|默认的滚动条滑块的背景色|
|numberToUnit|value => ${value / 4}rem |捕获到的数字转化成单位的方法|
|varPrefix|''|该预设生成的css变量的前缀|
|prefix|''|该预设生成的shortcuts加上前缀|
|noCompatible|'true'|如果为 false 的话 会使用 scrollbar-width 和 scrollbar-color 这两个规则，能够在Firefox上兼容, 但是scrollbar-h、scrollbar-w 以及 scrollbar-raidus 会失效 |

举个例子

`html