unocss-preset-scrollbar

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

简体中文 | English

安装

npm i unocss-preset-scrollbar unocss -D

使用

// 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"
/>

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

/* layer: shortcuts */
.scrollbar::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-height);}
.scrollbar{overflow:auto;--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：

<div
  scrollbar="~ rounded"
/>

或者使用 @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
}

配置

|配置项|默认值|说明| |--|--|--| |scrollbarWidth|8px|默认的滚动条宽度| |scrollbarHeight|8px|默认的滚动条高度| |scrollbarTrackRadius|4px|默认的滚动条轨迹的圆角| |scrollbarThumbRadius|4px|默认的滚动条滑块的圆角| |scrollbarTrackColor|#f5f5f5|默认的滚动条轨迹的背景色| |scrollbarThumbColor|#ddd|默认的滚动条滑块的背景色| |varPrefix|''|该预设生成的css变量的前缀| |compatible|false|如果为 true 会启用 scrollbar-width 和 scrollbar-color 以兼容 Firefox；该模式下 scrollbar-h、scrollbar-w 和 scrollbar-radius 可能无法按预期生效 |

该 PR 中，numberToUnit 和预设级 prefix 已废弃并移除。

举个例子

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

scrollbar-w-4 现在遵循 UnoCSS 内建的长度解析规则，生成 --scrollbar-width: 1rem。

规则

scrollbar

scrollbar-thin

.scrollbar-thin {
  scrollbar-width: thin; // 仅在 compatible 为 true 时生成
  --scrollbar-width: 8px;
  --scrollbar-height: 8px;
}

scrollbar-none

.scrollbar-none {
  scrollbar-width: none;
}

.scrollbar-none::-webkit-scrollbar {
  display:none;
}

rounded

scrollbar-rounded

使滚动条有圆角

color

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

设置轨迹或滑块的背景色

scrollbar-(track|thumb)-(op|opacity)-<percent>

设置轨迹或滑块的透明度变量

size

scrollbar-(radius|w|h|track-radius|thumb-radius)-<length>

|对应key|说明| |--|--| |raidus|设置轨迹和滑块的圆角| |w|设置滚动条宽度| |h|设置滚动条高度| |track-radius|设置轨迹圆角| |thumb-radius|设置滑块圆角|

注意长度解析遵循 UnoCSS 内建规则：纯数字（如 4）会按 rem 规则转换，带单位（如 4px、4rem）会原样保留。

注意想要设置滚动条的圆角，必须先使用 scrollbar-rounded

例如：

• scrollbar-w-4 -> --scrollbar-width: 1rem
• scrollbar-w-4px -> --scrollbar-width: 4px
• scrollbar-w-4rem -> --scrollbar-width: 4rem

warning 当 compatible 为 true 时，scrollbar-w、scrollbar-h 和 scrollbar-radius 可能无法在兼容模式下生效。

License

MIT License © 2021 kkopite