https://github.com/siibragimov/vue-smooth-scrollbar-ts
Vue 3 and Nuxt 3 compatible smooth-scrollbar component
https://github.com/siibragimov/vue-smooth-scrollbar-ts
custom-scrollbar mac macos nuxt3 scroll scroll-style scrollbar scrollbar-style smooth-scrolling typescript vue3
Last synced: 5 months ago
JSON representation
Vue 3 and Nuxt 3 compatible smooth-scrollbar component
- Host: GitHub
- URL: https://github.com/siibragimov/vue-smooth-scrollbar-ts
- Owner: siibragimov
- License: mit
- Created: 2024-07-08T12:19:25.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-18T19:36:59.000Z (almost 2 years ago)
- Last Synced: 2025-03-12T19:37:41.964Z (over 1 year ago)
- Topics: custom-scrollbar, mac, macos, nuxt3, scroll, scroll-style, scrollbar, scrollbar-style, smooth-scrolling, typescript, vue3
- Language: Vue
- Homepage:
- Size: 1.39 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue 3 and Nuxt 3 smooth scrollbar component
Add your styled scrollbar to any block, which will look consistent across all platforms. To see how it works, please, see the demo.
[](https://badge.fury.io/js/vue-smooth-scrollbar-ts)
[](https://github.com/siibragimov/vue-smooth-scrollbar-ts/actions/workflows/npm-publish-github-packages.yml)
[](https://github.com/siibragimov/vue-smooth-scrollbar-ts/actions/workflows/npm-publish.yml)
[](https://bundlephobia.com/package/vue-smooth-scrollbar-ts)
Based on [https://idiotwu.github.io/smooth-scrollbar/](https://idiotwu.github.io/smooth-scrollbar/).
## Demo
There are two examples in the demo. One of them with custom styles.
## Installation and setup
### 1. Install component:
If you want to install package from __npmjs registry__(recommended) use:
```shell
npm i vue-smooth-scrollbar-ts
```
```shell
yarn add vue-smooth-scrollbar-ts
```
```shell
pnpm add vue-smooth-scrollbar-ts
```
If you want to install package from __GitHub packages__ use:
```shell
npm install @siibragimov/vue-smooth-scrollbar-ts
```
**Note**: Don't forget to configure registry for installing packages from GitHub. Use __.npmrc__ file or use command:
```shell
npm config set registry https://npm.pkg.github.com/
```
### 2. Import CSS.
For Vue 3:
```javascript
// in entry point (main.js)
import '../node_modules/vue-smooth-scrollbar-ts/dist/style.css';
```
For Nuxt 3:
```javascript
// nuxt.config.ts
export default defineNuxtConfig({
css: ['~/node_modules/vue-smooth-scrollbar-ts/dist/style.css'],
});
```
**Note**: If you have problems with import, check the file path and especially the prefix.
### 3. Define overriding styles for scrollbars if needed. See the [`App.vue`](/src/App.vue).
**Note**: to make component work properly add height or width styling properties explicitly for the parent block of component. It behaviour is very close to the scroll when you use `overflow: scroll`. For more info checkout [this page](https://github.com/idiotWu/smooth-scrollbar/tree/develop/docs#common-mistakes).
### 4. Import component in your code:
```javascript
import { VueSmoothScrollbarTs } from 'vue-smooth-scrollbar-ts'
```
### 5. Wrap content you want to be scrolled.
Example:
```javascript
```
## Properties
| Name | Type | Default | Description |
| ------------- | ------------- | ------------- | ------------- |
| __options__ | `ScrollbarOptions` | `{}` | check the list [here](https://github.com/idiotWu/smooth-scrollbar/tree/develop/docs#available-options-for-scrollbar) |
| __plugins__ | `Array` | `[]` | check the list [here](https://github.com/idiotWu/smooth-scrollbar/tree/develop/docs) |
| __scrollIntoView__ | `boolean` | `false` | Scrolls the block into viewport when the user points cursor over it |
## Contributing
To run in development mode
```shell
npm run dev
```
Use for build component
```shell
npm run build
```
and follow the instruction in console to open the test page.
To generate types you can use:
```shell
npm run types
```