Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unpreset/unocss-preset-scrollbar
Scrollbar for UnoCSS preset.
https://github.com/unpreset/unocss-preset-scrollbar
Last synced: 17 days ago
JSON representation
Scrollbar for UnoCSS preset.
- Host: GitHub
- URL: https://github.com/unpreset/unocss-preset-scrollbar
- Owner: unpreset
- License: mit
- Created: 2022-03-23T10:27:14.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-18T02:31:58.000Z (9 months ago)
- Last Synced: 2024-09-19T07:19:51.927Z (about 2 months ago)
- Language: TypeScript
- Homepage:
- Size: 379 KB
- Stars: 53
- Watchers: 3
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-unocss - unocss-preset-scrollbar - Scrollbar Preset. (Presets)
- awesome-unocss - unocss-preset-scrollbar - Scrollbar Preset. (Presets)
README
# unocss-preset-scrollbar
[](https://www.npmjs.com/package/unocss-preset-scrollbar) 
a [unocss](https://github.com/unocss/unocss) preset for scrollbar，here is a [demo](https://stackblitz.com/edit/vitejs-vite-gyun7j?file=index.html)
English | [简体中文](./README.zh-CN.md)
## Installation
```bash
npm i unocss-preset-scrollbar unocss -D
```
## Usage
```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
```
it will generate below 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;}
```
you can also use [`Attributify Mode`](https://github.com/unocss/unocss/tree/main/packages/preset-attributify)：
```html
```
or use `@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
}
```
## 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|
|`prefix`|`''`|Apply prefix to all utilities and shortcuts|
|`noCompatible`|`'true'`|if `false`, it use `scrollbar-width` and `scrollbar-color`，work in Firefox, but `scrollbar-h`, `scrollbar-w` and `scrollbar-radius` will not work |
for example
```html