unocss preset for scrollbar
npm install unocss-preset-scrollbar !npm
简体中文 | 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