【开源自荐】响应式可编程的滚动条样式 (vue3)

[markthree]

useScrollBarStyle

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

Motivation

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

Usage

install

npm i use-scroll-bar-style

import

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

Refs

该组件由以下库搭建而成

• vite
• vueuse
• unocss

Support

该库由 vue3-exports 提供支持，vue-dark-switch 提供暗黑模式下的测试。

License

Made with markthree

Published under MIT License.

[CaicoLeung]

下架了吗？

[markthree]

@CaicoLeung 靓仔你好，没有下架，链接写错而已，已更正 👉 https://github.com/markthree/useScrollBarStyle