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.

Based on 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:

npm i vue-smooth-scrollbar-ts

yarn add vue-smooth-scrollbar-ts

pnpm add vue-smooth-scrollbar-ts

If you want to install package from GitHub packages use:

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:

npm config set registry https://npm.pkg.github.com/

2. Import CSS.

For Vue 3:

  // in entry point (main.js)
  import '../node_modules/vue-smooth-scrollbar-ts/dist/style.css';

For Nuxt 3:

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

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.

4. Import component in your code:

import { VueSmoothScrollbarTs } from 'vue-smooth-scrollbar-ts'

5. Wrap content you want to be scrolled.

Example:

<aside class="container">
  <VueSmoothScrollbarTs>
      <!-- YOUR CONTENT -->
  </VueSmoothScrollbarTs>
</aside>

Properties

| Name | Type | Default | Description | | ------------- | ------------- | ------------- | ------------- | | options | ScrollbarOptions | {} | check the list here | | plugins | Array<ScrollbarPlugin> | [] | check the list here | | scrollIntoView | boolean | false | Scrolls the block into viewport when the user points cursor over it |

Contributing

To run in development mode

npm run dev

Use for build component

npm run build

and follow the instruction in console to open the test page.

To generate types you can use:

npm run types