vue-touch-scroll

A plugin scroll cross browser for Vue.js

Table of Contents

• Installation
• Usage
• License

Installation

npm install vue-touch-scroll

or if you prefer CDN

<script type="text/javascript" src="https://unpkg.com/vue-touch-scroll@latest/dist/vue-touch-scroll.js"></script>

Usage

Global

import { use } from "vue"
import VueTouchScroll from "vue-touch-scroll"

use(VueTouchScroll)

<vue-touch-scroll type="vertical">
   <!-- Content -->
</vue-touch-scroll>

or

<div v-touch-scroll:vertical>
   <!-- Content -+>
</div>

Private

<vue-touch-scroll type="vertical">
   <!-- Content -->
</vue-touch-scroll>

<script>
   import { VueTouchScroll } from "vue-touch-scroll"
   
   export default {
      components: { VueTouchScroll }
   }
</script>

or

<div v-touch-scroll:vertical>
   <!-- Content -+>
</div>

<script>
   import { directive } from "vue-touch-scroll"
   
   export default {
      directives: {
         "touch-scroll": directive
      }
   }
</script> 

Configuration

Component

| Property | Type | Default | Description | |:-|:-|:-|:-| | tag | String | "div" | A tag name for component | | type | String | "vertical" | Direction scroll "vertical" or "horizontal" | | hide-scrollbar | Boolean | false | Are you hide scrollbar? | | class-scrollbar | String, Array, Object | "" | Class for scrollbar | | style-scrollbar | Object | {} | Style for scrollbar |

Directive

<div v-touch-scroll:arg="value"></div>

| Property | Description | |:-|:-|:-|:-| | arg | = option type in component | | value | = option scrollbar |

Options sscrollbar

<div v-touch-scroll:vertical="{
   render: true, // render scrollbar?
   class: [] // class for scrollbar,
   style: {}
}"></div> 

License

This project is licensed under the MIT License - see the LICENSE.md file for details.