Vue Scrollable container

It's component to create custom scrollable area in your app. Uses native js methods for scrolling. Has zero dependencies.

Note. This version to use with vue 3 version. Vue 2 version.

DEMO

Install

npm

npm i vue-scrollable-container3

yarn

yarn add vue-scrollable-container3

Usage

As SFC import

<template>
  <vscrolbar>
    Something
  </vscrolbar>
</template>

<script>
import VScrollbar from 'vue-scrollable-container3/component';

export default {
  components: {
    VScrollbar,
  },
};
</script>

As global registered component

import { createApp } from 'vue';
import VScrollbar from 'vue-scrollable-container3';

import 'vue-scrollable-container3/styles.scss';

createApp().use(VScrollbar).mount('#app');

Props

| Props | Type | Default | Description | |-------------------|-----------|--------------------------------------------------------|---------------------------------------------------------------------------| | tag | String | "div" | Basic root tag of scrollable area | | content-style | Object | {} | Custom CSS styles for vs-content | | bar-color | String | '' | Custom color for bars | | offsetting-bar | Boolean | true | Enable calculating offsets of container for rendering bars by those sizes | | observer-config | Object | { attributes: true, childList: true, subtree: true } | Config for MutationObserver to watch content changes |

Result

<div class="vs-container">
  <div class="vs-wrapper">
    <div class="vs-content">
      Something
    </div>
  </div>
  <div class="vs-scroll vs-scroll--x"></div>
  <div class="vs-scroll vs-scroll--y"></div>
</div>

Notes

tag tag="section" return <section class="vs-conatiner"> Other parts of structure will not change.

License

MIT

Author

Nikita Rogachev