Vue-simple-scrollbar NPM

🦉 vue-simple-scrollbar

A simple friendly lightweight scrollbar to make take your scrollbar game to the next level. This awesome package was ported from the awesome simple-scrollbar

How it works?

Vue simple scrollbar creates an elegant, customizable lightweight javascript scrollbar for content that overflows the vue-simple-scrollbar's parent element. Out of the box, vue-simple-scrollbar gives you:

Super fast and lightweight (2.1KB after gzip and minify)
It uses the native scroll events(mouse wheel, space, page down, page up, arrows)
No dependencies, completely vanilla Javascript!

⚡️ Demo

Very ugly demo here: Demo Don't worry! Will make it more elegant later!

📦 Installation

With Yarn:

yarn add vue-simple-scrollbar

Or if you're an NPM hipster:

npm install vue-simple-scrollbar --save

🖌 Usage

📌 Local Component Registation

You can import the vue-simple-scrollbar in your single file component as shown below. Remember to import the vue-simple-scrollbar in your style tag as well.

In your template file

<template>
  <div class="box">
    <vue-simple-scrollbar>
      {{ longString }}
    </vue-simple-scrollbar>
  </div>
</template>

<script lang="js">
import VueSimpleScrollbar from 'vue-simple-scrollbar'

export default {
  name: 'MyComponent',
  components: {
    VueSimpleScrollbar
  },
  data() {
    return {
      longString: 'Lorem Ipsum ...'
    }
  }
}
</script>

<style scoped>
@import '~vue-simple-scrollbar/dist/vue-simple-scrollbar.css';

.box {
  width: 200px;
  height: 200px;
}
</style>

🌍 Global Component Registation

In your main.js:

import Vue from 'vue'
import App from './App.vue'
import VueSimpleScript from 'vue-simple-scrollbar'
import 'vue-simple-scrollbar/dist/vue-simple-scrollbar.css'

Vue.component('VueSimpleScrollBar', VueSimpleScrollbar)

new Vue({
  render: h => h(App)
}).$mount('#app')

Then use the vue-simple-scrollbar component directly in your components.

📬 With CDN

In your good old trusty HTML:

<meta charset="utf-8">
<title>My Page</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-simple-scrollbar@latest/dist/vue-simple-scrollbar.umd.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-simple-scrollbar@latest/dist/vue-simple-scrollbar.css">


<div id="app">
  <demo></demo>
</div>

<script>
new Vue({
  components: {
    VueSimpleScrollbar
  }
}).$mount('#app')
</script>

Props:

Name	Description	Type	Required	Default	Values
`color`	Background color scrollbar	`String`	`false`	`rgba(0, 0, 0, 0.1);`
`autoScroll`	Watches for changes in DOM content via the Mutation Observer API and automatically scrolls to `autoscrollDirection`	`String`	`false`	`false`
`autoScrollDirection`	Direction of auto scroll behavior	`String`	`false`	`bottom`	`bottom`, `top`
`scrollBehavior`	Behaviour of scroll animation	`String`	`false`	`rgba(0, 0, 0, 0.1);`	`smooth`

Programmatically Scrolling `vue-simple-scrollbar`

vue-simple-scrollbar can also be programmatically scrolled for content that is dynamic in nature. This can be done by directly calling the scroll methods on the vue-simple-scrollbar component.

<template>
  <div>
    <vue-simple-scrollbar ref="scrollbarWrapper">
      ... content ...
    </vue-simple-scrollbar>
  </div>
</template>

<script lang="js">
import VueSimpleScrollbar from 'vue-simple-scrollbar'

export default {
  name: 'ParentComponent',
  components: {
    VueSimpleScrollbar
  },
  mounted() {
    // Programmatically scroll content to bottom
    this.$refs.scrollbarWrapper.scrollToBottom()

    // Programmatically scroll content to top
    this.$refs.scrollbarWrapper.scrollToTop()
  }
}
</script>

🥦 TODO:

Dynamic styles/colors
- Github issue template
- Pull request template
Custom styling via props.
Auto Scroll control and behaviour
Smart padding of inner wrapper markup.
- Dynamic smart padding via props
Documentation Site
Server side rendering support with Vue SSR and Nuxt.js
Make demo site more elegant.
- Use Saber for docs
- Make CodeSandbox demos
- Write articles
Design Logo