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

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

custom-scrollbar scrollbar vue vue-scrollbar vue2 vuejs2

Last synced: about 2 months ago
JSON representation

The Simplest Pretty Scroll Area Component with custom scrollbar for Vue 2. https://bosnaufal.github.io/vue2-scrollbar

• Host: GitHub
• URL: https://github.com/BosNaufal/vue2-scrollbar
• Owner: BosNaufal
• License: mit
• Created: 2016-12-31T07:10:17.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T01:06:12.000Z (almost 2 years ago)
• Last Synced: 2024-07-19T18:43:27.399Z (2 months ago)
• Topics: custom-scrollbar, scrollbar, vue, vue-scrollbar, vue2, vuejs2
• Language: Vue
• Size: 938 KB
• Stars: 235
• Watchers: 8
• Forks: 80
• Open Issues: 35
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue 2  Scrollbar

The Simplest Scroll Area Component with custom scrollbar for [Vue 2](https://vuejs.or). It's based on [react-scrollbar](https://github.com/BosNaufal/react-scrollbar). All animation, Height and Width are pure CSS, So it's TOTALLY **CUSTOMIZABLE** and **RESPONSIVE**! YEAH!.

[DEMO](https://bosnaufal.github.io/vue2-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.vue) and process it with your preprocessor.

You can install it via NPM

```bash

npm install vue2-scrollbar

```

Or Just put it after Vue JS~

```html

  // Don't Forget to register it

  new Vue({

    components: {

      scrollbar: Vue2Scrollbar

    }

  });

```

## Import Style

Don't forget to import vue 2 css. You can link it via html

```html

```

Or You can import it using commonJS

```javascript

require('vue2-scrollbar/style/vue2-scrollbar.css')

```

Its style is very customizable. You can put any CSS over it. And You can add custom class via its prop.

## Import Module

```javascript

import ScrollBar from 'vue2-scrollbar'

// Or

var ScrollBar = require('vue2-scrollbar');

```

## Usage

```html

  


    

      


        


        


        


        


        


        


        


        


        


        


        


        


        


        


        


        


        


      

    

  


  import VueScrollbar from 'vue2-scrollbar';

  require("vue2-scrollbar/style/vue2-scrollbar.css")

  // It's required to set min height of the scrollbar wrapper

  require("./your/custom/style/app.css")

  export default {

    components: { VueScrollbar },

  };

```

## Props

##### clasess (String)

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

```css

/*The Wrapper*/

.my-scrollbar{

  width: 35%;

  min-width: 300px;

  max-height: 450px;

}

/*The Content*/

.scroll-me{

  min-width: 750px;

}

```

##### style (Object)

If you prefer to use inline style to styling the scrollbar, you can pass the styling object to this props.

```javascript

this.styling = {

  /* Scrollbar */

  scrollbar: {

    width: "35%",

    minWidth: "300px",

    maxHeight: "450px"

  },

}

```

```html

```

##### speed (Number)

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

##### onMaxScroll (type: Function, return: Object)

Applied when the scrollbar in the max vertical or max horizontal scrolling. Make a possibility to add some *load more* feature or infinite scroll

```javascript

// Examples

handleMaxScroll(direction) {

  console.log(direction);

}

```

```html

```

## Methods

You can do some methods by accessing the component via javascript.

```javascript

this.$refs.scrollbar.someMethod()

```

##### scrollToY(y)

To scroll the scrollbar to the Y

```javascript

// Examples

someMethod() {

  this.$refs.Scrollbar.scrollToY(100)

}

```

##### scrollToX(x)

To scroll the scrollbar to the X

```javascript

// Examples

someMethod() {

  this.$refs.Scrollbar.scrollToX(100)

}

```

## 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