Example • Documentation • FAQ
The official OverlayScrollbars wrapper for Vue.
Installation
npm install overlayscrollbars-vue
Peer Dependencies
OverlayScrollbars for Vue has the following peer dependencies:
- The vanilla JavaScript library: overlayscrollbars
npm install overlayscrollbars
- The Vue 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!
There are different ways to achieve this, in Vue the most simple way for me was to add this line in the main
file:
;
Import
With the Vue.use method you can register the wrapper globally:
;; Vue;
In case you wanna register the Component manually via global or local registration, you can simply import it and do whatever you want with it:
;; // global registrationVue; // local registration el: '#app' components: 'overlay-scrollbars': OverlayScrollbarsComponent ;
Template
After the registration you can use it in templates like:
example content
The default selector is overlay-scrollbars
, but in case you register it manually you can choose it by yourself.
Properties
Two properties are accepted: options
and extensions
.
- The
options
property accepts aobject
and can be changed at any point in time, and the plugin will adapt. - The
extensions
property accepts astring
,string array
orobject
and is 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 provides two methods: osInstance()
and osTarget()
.
- The
osInstance()
method returns the OverlayScrollbarsinstance
of the component, ornull
if the instance isn't initialized yet or already destroyed. - The
osTarget()
method returns the nativehtml
element to which the plugin was initialized, ornull
if the the component isn't mounted yet or already unmounted.
Example App
In case you need a example app for reference, you can use the example app in this repo(example folder
):
If you wanna build the example app, run these commands:
npm run setupnpm run buildnpm run example
License
MIT