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-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：

<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|默认的滚动条滑块的背景色| |numberToUnit|value => `${value / 4}rem` |捕获到的数字转化成单位的方法| |varPrefix|''|该预设生成的css变量的前缀| |prefix|''|该预设生成的shortcuts加上前缀| |noCompatible|'true'|如果为 false 的话 会使用 scrollbar-width 和 scrollbar-color 这两个规则，能够在Firefox上兼容, 但是scrollbar-h、scrollbar-w 以及 scrollbar-raidus 会失效 |

举个例子

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

如果你使用默认的配置，scrollbar-w-4 将会转化成 --scrollbar-width: 1rem

而如果你自定义 numberToUnit 项：

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

将转化成 --scrollbar-width: 4px

规则

scrollbar

scrollbar-thin

.scrollbar-thin {
  scrollbar-width: thin; // 如果 noCompatible 为 true, 则不会生成该行
  --un-scrollbar-width: 8px;
  --un-scrollbar-height: 8px;
}

scrollbar-none

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

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

rounded

scrollbar-rounded

使滚动条有圆角

颜色

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

设置轨迹或滑块的背景色

size

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

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

注意如果以数字结尾，则会通过 numberToUnit 转化成带有单位的长度，反之直接生成对应的单位长度。

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

例如：

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

other

base starter-ts

License

MIT License © 2021 kkopite