overlayscrollbars-vue

The OverlayScrollbars wrapper for Vue3.

Installation

npm install @codeporter/overlayscrollbars-vue

Peer Dependencies

OverlayScrollbars for Vue3 has the following peer dependencies:

• The JavaScript library: overlayscrollbars

npm install overlayscrollbars

• The Vue3 framework: vue

npm install vue

TypeScript

• In case you are using TypeScript, you have to install the OverlayScrollbars typings:

npm install @types/overlayscrollbars

Since this wrapper is written in TypeScript it comes with its generated typings.

Check out the recommended tsconfig.json options.

Usage

CSS

You have to import the OverlayScrollbars.css by yourself. The component doesn't do it for you as the styles are global styles!

import 'overlayscrollbars/css/OverlayScrollbars.css';

Import

Register global component:

import { createApp } from 'vue';
import App from './App.vue';
import { OverlayScrollbars } from ' @codeporter/overlayscrollbars-vue';
import 'overlayscrollbars/css/OverlayScrollbars.css';

const app = createApp(App)
app.use(OverlayScrollbars)
app.mount('#app')

Register local component:

<script setup lang="ts">
import { OverlayScrollbars } from ' @codeporter/overlayscrollbars-vue';
import 'overlayscrollbars/css/OverlayScrollbars.css';
</script>

or

<script lang="ts">
import { defineComponent } from 'vue';
import { OverlayScrollbars } from ' @codeporter/overlayscrollbars-vue';
import 'overlayscrollbars/css/OverlayScrollbars.css';

export default defineComponent({
  components: {
    OverlayScrollbars
  }
})
</script>

Template

After the registration you can use it in templates like:

<overlay-scrollbars>
  example content
</overlay-scrollbars>

The default selector is overlay-scrollbars, but in case you register it manually you can choose it by yourself.

Properties

| Property | Type | Default | Description | | ----------- | :------------------------------ | :------ | :------------------------------------------------------------- | | options | object | - | can be changed at any point in time, and the plugin will adapt | | extensions | string / array / object | - | only taken into account if the component gets mounted |

<overlay-scrollbars 
  :options="{ scrollbars: { autoHide: 'scroll' } }" 
  :extensions="['extensionA', 'extensionB']"
>
</overlay-scrollbars>

You can read more about the options object here, extensions are documented here and here.

Instance

If you get the component reference, it exposes the OverlayScrollbars instance of the component, or null if the instance isn't initialized yet or already destroyed.

<script setup>
import { ref } from 'vue'
const scrollbar = ref(null)

const scollTo = () => {
  scrollbar.value?.instance?.scroll([0, '100%'], 400)
}
</script>

<template>
  <overlay-scrollbars ref="scrollbar"></overlay-scrollbars>
</template>

License

MIT