# use-scroll-bar-style

> 响应式可编程的滚动条样式 (vue3)

Latest version **0.1.2** (published 2022-12-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-scroll-bar-style
pnpm add use-scroll-bar-style
yarn add use-scroll-bar-style
bun add use-scroll-bar-style
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2022-12-14 |
| First published | 2022-12-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 16 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | markthree |
| Maintainers | markthree |
| Keywords | vite, vue3, component, typescript |

## Links

- npm: https://www.npmjs.com/package/use-scroll-bar-style
- Repository: https://github.com/dishait/useScrollBar
- Homepage: https://github.com/dishait/useScrollBar#readme
- Issues: https://github.com/dishait/useScrollBar/issues
- npm.io page: https://npm.io/package/use-scroll-bar-style

## Dependencies (1)

- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^9.6.0

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2022-12-14
- 0.1.1 — 2022-12-14

## README

<div align="center">
    <img width="100%" height="100%" src="./snapshot.gif" />
    <h1>useScrollBarStyle</h1>
    <p>响应式可编程的滚动条样式 (vue3)</p>
</div>

<br />

## Motivation

大多数人都会选择改掉 `web` 原生难看的滚动条样式，但是原生滚动条的选择器实在是复杂。所以有了这个库，当然得益于 `vue3` 的支持，一切都是响应式可编程的，例如你可以根据不同场景变换滚动条的样式，尤其是在 `web` 网站有多主题需求时，一切都会变得简单。

<br />

## Usage

### install

```shell
npm i use-scroll-bar-style
```

### import

```html
<script setup lang="ts">
	import { useScrollBarStyle } from 'use-scroll-bar-style'

	const {
		width,
		thumbBackgroundColor,
		darkThumbBackgroundColor
		// ... etc
	} = useScrollBarStyle()

	width.value = '10px' // 宽度

	thumbBackgroundColor.value = 'red' //  thumb 背景颜色

	darkThumbBackgroundColor.value = 'blue' // 暗黑模式下 thumb 背景颜色
</script>
```

<br />

## Refs

该组件由以下库搭建而成

- [vite](https://cn.vitejs.dev/)
- [vueuse](https://vueuse.org/)
- [unocss](https://github.com/unocss/unocss)

<br />

## Support

该库由 [vue3-exports](https://github.com/dishait/vue3-exports) 提供支持，[vue-dark-switch](https://github.com/dishait/vue-dark-switch) 提供暗黑模式下的测试。

<br />

## License

Made with [markthree](https://github.com/markthree)

Published under [MIT License](./LICENSE).

---
_Source: https://npm.io/package/use-scroll-bar-style · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._