🦉 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:

• [x] Dynamic styles/colors
  • [x] Github issue template
  • [x] Pull request template
• [x] Custom styling via props.
• [x] 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

Contributing:

Please read the Contribution Guide for details on our code of conduct, and the process for submitting pull requests to us.

License: MIT

Please read the license documentation for more information

Contributors

Waiting for you ❤️. Feel free to take a stab at one of the upcoming tasks or open issues.

🍇 Author

Made with love by Jonathan Bakebwa. 👣 Github: @codebender828 🦅 Twitter: @codebender828

☕️ Support

Do you like my work? Buy me a coffee!