https://github.com/BosNaufal/vue-scrollbar

The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/
https://github.com/BosNaufal/vue-scrollbar

Last synced: 3 months ago
JSON representation

The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/

• Host: GitHub
• URL: https://github.com/BosNaufal/vue-scrollbar
• Owner: BosNaufal
• License: mit
• Created: 2016-05-08T07:07:01.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-09-29T22:49:27.000Z (over 8 years ago)
• Last Synced: 2024-09-28T08:16:23.562Z (4 months ago)
• Language: Vue
• Size: 56.6 KB
• Stars: 117
• Watchers: 8
• Forks: 25
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-cn - vue-scrollbar - The Simplest Scroll Area Component with custom scrollbar for Vue by [@BosNaufal](https://github.com/BosNaufal) (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Libraries & Plugins)
• awesome-vue - vue-scrollbar - scrollbar?style=social) - 最简单的滚动区域组件 (UI组件)
• awesome-github-vue - vue-scrollbar - 最简单的滚动区域组件 (UI组件)
• awesome-github-vue - vue-scrollbar - 最简单的滚动区域组件 (UI组件)
• awesome - vue-scrollbar - 最简单的滚动区域组件 (UI组件)

README

        
# Vue Scrollbar

The Simplest Scroll Area Component with custom scrollbar for [Vue Js](http://vuejs.org/). All animation, Height and Width are pure CSS, So it's TOTALLY **CUSTOMIZABLE** and **RESPONSIVE**! YEAH!.

[DEMO](https://bosnaufal.github.io/vue-scrollbar)

## Install

You can import [vue-scrollbar.vue](./src/js/components/vue-scrollbar.vue) to your vue component file like [this](./src/js/components/app.js) and process it with your preprocessor.;

You can install it via NPM

```bash

npm install vue-scrollbar

```

## Usage

```html

  

    


      
And Now

      
You Can Put

      
A Long Content Here

    

  


  import vueScrollbar from 'vue-scrollbar';

  export default {

    components: { vueScrollbar }

  };

```

## Props

##### clasess (String)

Just the ordinary class name for styling the wrapper. It's TOTALLY CUSTOMIZABLE!

```css

/*The Wrapper*/

.my-scrollbar{

  width: 35%;

  min-width: 300px;

  max-height: 450px;

}

/*The Content*/

.scroll-me{

  min-width: 750px;

}

```

##### speed (Number)

The wheel step in pixel. The default is 53 pixel per wheel.

## Thank You for Making this useful~

## Let's talk about some projects with me

Just Contact Me At:

- Email: [[email protected]](mailto:[email protected])

- Skype Id: bosnaufal254

- twitter: [@BosNaufal](https://twitter.com/BosNaufal)

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2016 - forever Naufal Rabbani