# vue-custom-scrollbar

> Vue 3 的简约但完美的自定义滚动条组件 (使用了 [perfect-scrollbar](https://github.com/utatti/perfect-scrollbar))

Latest version **2.0.2** (published 2026-02-17) · 0 weekly downloads

## Install

```sh
npm install vue-custom-scrollbar
pnpm add vue-custom-scrollbar
yarn add vue-custom-scrollbar
bun add vue-custom-scrollbar
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2026-02-17 |
| First published | 2018-09-14 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 54.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | traveller |

## Links

- npm: https://www.npmjs.com/package/vue-custom-scrollbar
- npm.io page: https://npm.io/package/vue-custom-scrollbar

## Dependencies (1)

- [perfect-scrollbar](https://npm.io/package/perfect-scrollbar.md) ^1.5.5

## Recent versions

- 2.0.2 (latest) — 2026-02-17
- 1.4.4-beta.0 (beta) — 2022-04-15
- 2.0.1 — 2026-02-04
- 2.0.0 — 2026-02-04
- 1.4.4 — 2022-04-15
- 1.4.3 — 2021-12-10
- 1.4.2 — 2021-12-10
- 1.4.1 — 2021-06-24
- 1.4.0 — 2020-10-05
- 1.3.0 — 2020-08-29
- 1.2.0 — 2020-05-01
- 1.1.0 — 2019-07-13
- 1.0.0 — 2018-09-17
- 0.1.0 — 2018-09-14

## README

# vue-custom-scrollbar

Vue 3 的简约但完美的自定义滚动条组件 (使用了 [perfect-scrollbar](https://github.com/utatti/perfect-scrollbar))

Minimalistic but perfect custom scrollbar component for Vue 3 (using [perfect-scrollbar](https://github.com/utatti/perfect-scrollbar))

## 安装 / Install

```bash
npm install vue-custom-scrollbar
# or
yarn add vue-custom-scrollbar
```

## 使用 / Usage

```vue
<template>
  <VueCustomScrollbar class="scroll-area" :settings="settings" @ps-scroll-y="scrollHandle">
    <img src="./image.jpg" alt="" />
  </VueCustomScrollbar>
</template>

<script setup>
import { reactive } from 'vue'
import VueCustomScrollbar from 'vue-custom-scrollbar'

const settings = reactive({
  suppressScrollY: false,
  suppressScrollX: false,
  wheelPropagation: false
})

const scrollHandle = (evt) => {
  console.log(evt)
}
</script>

<style>
.scroll-area {
  position: relative;
  margin: auto;
  width: 600px;
  height: 400px;
}
</style>
```

## 文档 / Docs

[Documentation](https://binaryify.github.io/vue-custom-scrollbar/)

## License

[MIT](https://github.com/Binaryify/vue-custom-scrollbar/blob/master/LICENSE)

---
_Source: https://npm.io/package/vue-custom-scrollbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._