├── assets
    └── img
    │   └── share.png
├── src
    ├── js
    │   ├── main.js
    │   └── components
    │   │   ├── app.vue
    │   │   ├── vertical-scrollbar.vue
    │   │   ├── horizontal-scrollbar.vue
    │   │   └── vue-scrollbar.vue
    └── sass
    │   ├── main.sass
    │   └── _Scrollbar.sass
├── webpack.config.js
├── LICENSE
├── package.json
├── README.md
└── index.html


/assets/img/share.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BosNaufal/vue-scrollbar/HEAD/assets/img/share.png


--------------------------------------------------------------------------------
/src/js/main.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var Vue = require('vue');
 3 | var App = require('./components/app.vue');
 4 | 
 5 | Vue.config.debug = true;
 6 | Vue.config.devTools = true;
 7 | 
 8 | new Vue({
 9 |   el: 'body',
10 |   components: { App: App }
11 | });
12 | 


--------------------------------------------------------------------------------
/src/sass/main.sass:
--------------------------------------------------------------------------------
 1 | 
 2 | body
 3 |   background: #f9f9f9
 4 | 
 5 | p
 6 |   margin-top: 0
 7 | 
 8 | .my-scrollbar
 9 |   width: 35%
10 |   min-width: 300px
11 |   max-height: 450px
12 | 
13 | .scroll-me
14 |   background: #EEE
15 |   min-width: 750px
16 | 
17 | .kolom
18 |   background: #2196F3
19 |   width: 150px
20 |   height: 150px
21 |   float: left
22 |   display: inline-block
23 |   margin: 15px
24 | 
25 | .clearfix
26 |   clear: both
27 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 
 2 | require('es6-promise').polyfill();
 3 | 
 4 | module.exports = {
 5 | 
 6 |   entry: './src/js/main.js',
 7 | 
 8 |   output: {
 9 |     path: './build',
10 |     filename: 'build.js'
11 |   },
12 | 
13 |   module: {
14 |     loaders: [
15 |       {
16 |         test: /\.vue$/,
17 |         loader: 'vue'
18 |       },
19 |       {
20 |         test: /\.sass$/,
21 |         loaders: ['style','css','sass']
22 |       }
23 |     ]
24 |   }
25 | 
26 | };
27 | 


--------------------------------------------------------------------------------
/src/js/components/app.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <template lang="jade">
 3 | 
 4 | div
 5 |   h1( align="center") Vue Scrollbar
 6 |   vue-scrollbar( classes="my-scrollbar" v-bind:speed=53 )
 7 |     .scroll-me
 8 |       .kolom
 9 |       .kolom
10 |       .kolom
11 |       .kolom
12 |       .kolom
13 |       .kolom
14 |       .kolom
15 |       .kolom
16 |       .kolom
17 |       .kolom
18 |       .kolom
19 |       .kolom
20 |       .kolom
21 |       .kolom
22 |       .kolom
23 |       .kolom
24 |       .kolom
25 |       .kolom
26 |       .kolom
27 |       .kolom
28 |       .clearfix
29 | br
30 | br
31 | h3( align="center" )
32 |   a( href="https://github.com/BosNaufal/vue-scrollbar" ) Fork Me On Github!
33 | </template>
34 | 
35 | <script>
36 | 
37 |   require('../../sass/main.sass');
38 |   import vueScrollbar from './vue-scrollbar.vue';
39 | 
40 |   export default {
41 |     components: { vueScrollbar }
42 |   };
43 | 
44 | 
45 | </script>
46 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Naufal Rabbani
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/sass/_Scrollbar.sass:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | .vue-scrollbar-transition
 4 |   transition: all 0.5s ease
 5 |   -moz-transition: all 0.5s ease
 6 |   -webkit-transition: all 0.5s ease
 7 |   -o-transition: all 0.5s ease
 8 | 
 9 |   &--scrollbar
10 |     transition: opacity 0.5s linear
11 |     -moz-transition: opacity 0.5s linear
12 |     -webkit-transition: opacity 0.5s linear
13 |     -o-transition: opacity 0.5s linear
14 | 
15 | .vue-scrollbar
16 |   &__wrapper
17 |     margin: 0 auto
18 |     overflow: hidden
19 |     position: relative
20 |     background: white
21 | 
22 |     &:hover
23 |       .vue-scrollbar
24 |         &__scrollbar-vertical, &__scrollbar-horizontal
25 |           opacity: 1
26 | 
27 | 
28 |   &__scrollbar-vertical, &__scrollbar-horizontal
29 |     @extend .vue-scrollbar-transition
30 |     opacity: 0.5
31 |     position: absolute
32 |     background: transparent
33 | 
34 |     &:hover
35 |       background: rgba(0,0,0,0.3)
36 | 
37 |     .scrollbar
38 |       position: relative
39 |       background: rgba(0,0,0,0.5)
40 |       cursor: default
41 | 
42 |   &__scrollbar-vertical
43 |     width: 10px
44 |     height: 100%
45 |     top: 0
46 |     right: 0
47 | 
48 |     .scrollbar
49 |       width: 10px
50 | 
51 |   &__scrollbar-horizontal
52 |     height: 10px
53 |     width: 100%
54 |     bottom: 0
55 |     right: 0
56 | 
57 |     .scrollbar
58 |       height: 10px
59 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-scrollbar",
 3 |   "version": "1.0.3",
 4 |   "description": "The Simplest Scroll Area Component with custom scrollbar for Vue JS",
 5 |   "main": "./src/js/components/vue-scrollbar.vue",
 6 |   "scripts": {
 7 |     "dev": "webpack-dev-server --inline --hot",
 8 |     "build": "webpack -p"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/BosNaufal/vue-scrollbar.git"
13 |   },
14 |   "keywords": [
15 |     "vue",
16 |     "component",
17 |     "web-components",
18 |     "vue js",
19 |     "scrollbar",
20 |     "scroll",
21 |     "scrollbar effect",
22 |     "smooth scroll",
23 |     "custom scrollbar",
24 |     "slimscroll",
25 |     "web-components"
26 |   ],
27 |   "author": "Naufal Rabbani <bosnaufalemail@gmail.com>",
28 |   "license": "MIT",
29 |   "bugs": {
30 |     "url": "https://github.com/BosNaufal/vue-scrollbar/issues"
31 |   },
32 |   "homepage": "https://github.com/BosNaufal/vue-scrollbar#readme",
33 |   "devDependencies": {
34 |     "babel-loader": "^6.2.4",
35 |     "babel-preset-es2015": "^6.6.0",
36 |     "css-loader": "^0.23.1",
37 |     "es6-promise": "^3.1.2",
38 |     "jade-loader": "^0.8.0",
39 |     "sass-loader": "^3.2.0",
40 |     "style-loader": "^0.13.1",
41 |     "vue-hot-reload-api": "^1.3.2",
42 |     "vue-html-loader": "^1.2.2",
43 |     "vue-loader": "^8.2.3",
44 |     "webpack": "^1.13.0",
45 |     "webpack-dev-server": "^1.14.1"
46 |   },
47 |   "dependencies": {
48 |     "vue": "^1.0.21"
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Scrollbar
 2 | 
 3 | 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!.
 4 | 
 5 | [DEMO](https://bosnaufal.github.io/vue-scrollbar)
 6 | 
 7 | ## Install
 8 | 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.;
 9 | 
10 | 
11 | You can install it via NPM
12 | ```bash
13 | npm install vue-scrollbar
14 | ```
15 | 
16 | 
17 | ## Usage
18 | ```html
19 | 
20 | <template>
21 |   <vue-scrollbar classes="my-scrollbar" v-bind:speed=100 >
22 |     <div class="should-have-a-children scroll-me">
23 |       <p>And Now</p>
24 |       <p>You Can Put</p>
25 |       <p>A Long Content Here</p>
26 |     </div>
27 |   </vue-scrollbar>
28 | </template>
29 | 
30 | <script>
31 | 
32 |   import vueScrollbar from 'vue-scrollbar';
33 | 
34 |   export default {
35 |     components: { vueScrollbar }
36 |   };
37 | 
38 | </script>
39 | ```
40 | 
41 | 
42 | ## Props
43 | ##### clasess (String)
44 | Just the ordinary class name for styling the wrapper. It's TOTALLY CUSTOMIZABLE!
45 | ```css
46 | /*The Wrapper*/
47 | .my-scrollbar{
48 |   width: 35%;
49 |   min-width: 300px;
50 |   max-height: 450px;
51 | }
52 | 
53 | /*The Content*/
54 | .scroll-me{
55 |   min-width: 750px;
56 | }
57 | ```
58 | 
59 | ##### speed (Number)
60 | The wheel step in pixel. The default is 53 pixel per wheel.
61 | 
62 | ## Thank You for Making this useful~
63 | 
64 | ## Let's talk about some projects with me
65 | Just Contact Me At:
66 | - Email: [bosnaufalemail@gmail.com](mailto:bosnaufalemail@gmail.com)
67 | - Skype Id: bosnaufal254
68 | - twitter: [@BosNaufal](https://twitter.com/BosNaufal)
69 | 
70 | ## License
71 | [MIT](http://opensource.org/licenses/MIT)
72 | Copyright (c) 2016 - forever Naufal Rabbani
73 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <title>Vue Scrollbar | The Simplest Scroll Area Component with custom scrollbar for Vue Js.</title>
 5 | 
 6 |   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <meta charset="UTF-8">
 9 | 
10 |   <meta name="description" content="The Simplest Scroll Area Component with custom scrollbar for Vue Js.">
11 |   <meta name="keywords" content="vue, component, vue js, scrollbar, scroll, scrollbar effect, smooth scroll, custom scrollbar, slimscroll">
12 |   <meta name="robots" content="index, follow">
13 |   <meta name="DC.title" content="Vue Scrollbar | The Simplest Scroll Area Component with custom scrollbar for Vue Js.">
14 | 
15 |   <meta property="og:url" content="http://bosnaufal.github.io/vue-scrollbar/">
16 |   <meta property="og:type" content="website">
17 |   <meta property="og:title" content="Vue Scrollbar">
18 |   <meta property="og:description" content="The Simplest Scroll Area Component with custom scrollbar for Vue Js.">
19 |   <meta property="og:image" content="http://bosnaufal.github.io/vue-scrollbar/assets/img/share.png">
20 | 
21 |   <meta name="twitter:card" content="summary_large_image">
22 |   <meta name="twitter:creator" content="@BosNaufal">
23 |   <meta name="twitter:site" content="@BosNaufal">
24 |   <meta name="twitter:title" content="Vue Scrollbar">
25 |   <meta name="twitter:description" content="The Simplest Scroll Area Component with custom scrollbar for Vue Js">
26 |   <meta name="twitter:image" content="http://bosnaufal.github.io/vue-scrollbar/assets/img/share.png">
27 | 
28 |   <link rel="canonical" href="http://bosnaufal.github.io/vue-scrollbar/">
29 |   <link rel="author" href="https://github.com/BosNaufal" />
30 |   <link rel="publisher" href="https://github.com/BosNaufal" />
31 | </head>
32 | <body>
33 | 
34 |   <app></app>
35 | 
36 |   <script src="./build/build.js"></script>
37 |   <!-- <script src="build.js"></script> -->
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/src/js/components/vertical-scrollbar.vue:
--------------------------------------------------------------------------------
  1 | 
  2 | <template lang="jade">
  3 | 
  4 | .vue-scrollbar__scrollbar-vertical( v-if="height < 100" @click="jump" v-el:container )
  5 |   .scrollbar(
  6 |     v-bind:class="dragging || draggingFromParent ? '' : 'vue-scrollbar-transition'"
  7 |     v-el:scrollbar
  8 |     @touchstart="startDrag"
  9 |     @mousedown="startDrag"
 10 |     v-bind:style="{ height: height+'%', top: scrolling.v + '%' }"
 11 |   )
 12 | 
 13 | </template>
 14 | 
 15 | <script>
 16 | 
 17 |   export default {
 18 | 
 19 |     props: {
 20 |       area: {
 21 |         type: Object,
 22 |         default: 0
 23 |       },
 24 |       wrapper: {
 25 |         type: Object,
 26 |         default: 0
 27 |       },
 28 |       scrolling: {
 29 |         type: Object,
 30 |         default: { v: 0, h: 0 }
 31 |       },
 32 |       draggingFromParent: {
 33 |         type: Boolean,
 34 |         default: false
 35 |       },
 36 |       onChangePosition: {
 37 |         type: Function,
 38 |         default: () => {}
 39 |       },
 40 |     },
 41 | 
 42 |     data(){
 43 |       return{
 44 |         height: 0,
 45 |         dragging: false,
 46 |         start: 0
 47 |       }
 48 |     },
 49 | 
 50 |     watch: {
 51 |       'wrapper.height'(val,old){
 52 |         if(val != old) this.calculateSize()
 53 |       }
 54 |     },
 55 | 
 56 |     methods: {
 57 |       startDrag(e){
 58 | 
 59 |         e.preventDefault()
 60 |         e.stopPropagation()
 61 | 
 62 |         e = e.changedTouches ? e.changedTouches[0] : e
 63 | 
 64 |         // Prepare to drag
 65 |         this.dragging = true
 66 |         this.start = e.pageY
 67 |       },
 68 |       onDrag(e){
 69 | 
 70 |         if(this.dragging){
 71 | 
 72 |           e.preventDefault()
 73 |           e.stopPropagation()
 74 | 
 75 |           e = e.changedTouches ? e.changedTouches[0] : e
 76 | 
 77 |           let yMovement = e.pageY - this.start
 78 |           let yMovementPercentage = yMovement / this.wrapper.height * 100
 79 | 
 80 |           // Update the last e.pageY
 81 |           this.start = e.pageY
 82 | 
 83 |           // The next Vertical Value will be
 84 |           let next = this.scrolling.v + yMovementPercentage
 85 | 
 86 |           this.normalize(next)
 87 | 
 88 |           // DO THIS WAY IS NOT SAFE FOR WORK!
 89 |           // But it needed to make it simple~
 90 |           this.$parent.dragging = true
 91 | 
 92 |           this.onChangePosition(next, 'vertical')
 93 |         }
 94 | 
 95 |       },
 96 | 
 97 |       stopDrag(e){
 98 |         this.dragging = false
 99 |         // DO THIS WAY IS NOT SAFE FOR WORK!
100 |         // But it needed to make it simple~
101 |         this.$parent.dragging = false
102 |       },
103 | 
104 |       jump(e){
105 | 
106 |         let isContainer = e.target === this.$els.container
107 |         if(isContainer){
108 |           // Get the Element Position
109 |           let position = this.$els.scrollbar.getBoundingClientRect()
110 | 
111 |           // Calculate the vertical Movement
112 |           let yMovement = e.pageY - position.top
113 |           let centerize = (this.height / 2)
114 |           let yMovementPercentage = yMovement / this.wrapper.height * 100 - centerize
115 | 
116 |           // Update the last e.pageY
117 |           this.start = e.pageY
118 | 
119 |           // The next Vertical Value will be
120 |           let next = this.scrolling.v + yMovementPercentage
121 | 
122 |           this.normalize(next)
123 |           this.onChangePosition(next, 'vertical')
124 | 
125 |         }
126 |       },
127 | 
128 |       normalize(next){
129 |         // Check For the Max Position
130 |         let lowerEnd = 100 - this.height
131 |         if(next < 0) next = 0
132 |         if(next > lowerEnd) next = lowerEnd
133 |         this.scrolling.v = next
134 |       },
135 | 
136 |       calculateSize(){
137 |         // Scrollbar Height
138 |         this.height =  this.wrapper.height / this.area.height * 100
139 |       }
140 | 
141 |     },
142 | 
143 |     ready(){
144 |       this.calculateSize()
145 | 
146 |       // Put the Listener
147 |       document.addEventListener("mousemove", this.onDrag)
148 |       document.addEventListener("touchmove", this.onDrag)
149 |       document.addEventListener("mouseup", this.stopDrag)
150 |       document.addEventListener("touchend", this.stopDrag)
151 |     },
152 | 
153 |     beforeDestroy(){
154 |       // Remove the Listener
155 |       document.removeEventListener("mousemove", this.onDrag)
156 |       document.removeEventListener("touchmove", this.onDrag)
157 |       document.removeEventListener("mouseup", this.stopDrag)
158 |       document.removeEventListener("touchend", this.stopDrag)
159 |     }
160 | 
161 |   };
162 | 
163 | </script>
164 | 


--------------------------------------------------------------------------------
/src/js/components/horizontal-scrollbar.vue:
--------------------------------------------------------------------------------
  1 | 
  2 | <template lang="jade">
  3 | 
  4 | .vue-scrollbar__scrollbar-horizontal( v-if="width < 100" @click="jump" v-el:container )
  5 |   .scrollbar(
  6 |     v-bind:class="dragging || draggingFromParent ? '' : 'vue-scrollbar-transition'"
  7 |     v-el:scrollbar
  8 |     @touchstart="startDrag"
  9 |     @mousedown="startDrag"
 10 |     v-bind:style="{ width: width+'%', left: scrolling.h + '%' }"
 11 |   )
 12 | 
 13 | </template>
 14 | 
 15 | <script>
 16 | 
 17 |   export default {
 18 | 
 19 |     props: {
 20 |       area: {
 21 |         type: Object,
 22 |         default: 0
 23 |       },
 24 |       wrapper: {
 25 |         type: Object,
 26 |         default: 0
 27 |       },
 28 |       scrolling: {
 29 |         type: Object,
 30 |         default: { v: 0, h: 0 }
 31 |       },
 32 |       draggingFromParent: {
 33 |         type: Boolean,
 34 |         default: false
 35 |       },
 36 |       onChangePosition: {
 37 |         type: Function,
 38 |         default: () => {}
 39 |       },
 40 |     },
 41 | 
 42 |     data(){
 43 |       return{
 44 |         width: 0,
 45 |         dragging: false,
 46 |         start: 0
 47 |       }
 48 |     },
 49 | 
 50 |     watch: {
 51 |       'wrapper.width'(val,old){
 52 |         if(val != old) this.calculateSize()
 53 |       }
 54 |     },
 55 | 
 56 |     methods: {
 57 |       startDrag(e){
 58 | 
 59 |         e.preventDefault()
 60 |         e.stopPropagation()
 61 | 
 62 |         e = e.changedTouches ? e.changedTouches[0] : e
 63 | 
 64 |         // Prepare to drag
 65 |         this.dragging = true
 66 |         this.start = e.pageX
 67 |       },
 68 |       onDrag(e){
 69 | 
 70 |         if(this.dragging){
 71 | 
 72 |           e.preventDefault()
 73 |           e.stopPropagation()
 74 | 
 75 |           e = e.changedTouches ? e.changedTouches[0] : e
 76 | 
 77 |           let xMovement = e.pageX - this.start
 78 |           let xMovementPercentage = xMovement / this.wrapper.width * 100
 79 | 
 80 |           // Update the last e.pageX
 81 |           this.start = e.pageX
 82 | 
 83 |           // The next Horizontal Value will be
 84 |           let next = this.scrolling.h + xMovementPercentage
 85 | 
 86 |           this.normalize(next)
 87 | 
 88 |           // DO THIS WAY IS NOT SAFE FOR WORK!
 89 |           // But it needed to make it simple~
 90 |           this.$parent.dragging = true
 91 | 
 92 |           this.onChangePosition(next, 'horizontal')
 93 |         }
 94 | 
 95 |       },
 96 | 
 97 |       stopDrag(e){
 98 |         this.dragging = false
 99 |         // DO THIS WAY IS NOT SAFE FOR WORK!
100 |         // But it needed to make it simple~
101 |         this.$parent.dragging = false
102 |       },
103 | 
104 |       jump(e){
105 | 
106 |         let isContainer = e.target === this.$els.container
107 |         if(isContainer){
108 |           // Get the Element Position
109 |           let position = this.$els.scrollbar.getBoundingClientRect()
110 | 
111 |           // Calculate the horizontal Movement
112 |           let xMovement = e.pageX - position.left;
113 | 
114 |           let centerize = (this.width / 2)
115 |           let xMovementPercentage = xMovement / this.wrapper.width * 100 - centerize
116 | 
117 |           // Update the last e.pageX
118 |           this.start = e.pageX
119 | 
120 |           // The next horizontal Value will be
121 |           let next = this.scrolling.h + xMovementPercentage
122 | 
123 |           this.normalize(next)
124 |           this.onChangePosition(next, 'horizontal')
125 | 
126 |         }
127 |       },
128 | 
129 |       normalize(next){
130 |         // Check For the Max Position
131 |         let lowerEnd = 100 - this.width
132 |         if(next < 0) next = 0
133 |         if(next > lowerEnd) next = lowerEnd
134 |         this.scrolling.h = next
135 |       },
136 | 
137 |       calculateSize(){
138 |         // Scrollbar Width
139 |         this.width =  this.wrapper.width / this.area.width * 100
140 |       }
141 | 
142 |     },
143 | 
144 |     ready(){
145 |       this.calculateSize()
146 | 
147 |       // Put the Listener
148 |       document.addEventListener("mousemove", this.onDrag)
149 |       document.addEventListener("touchmove", this.onDrag)
150 |       document.addEventListener("mouseup", this.stopDrag)
151 |       document.addEventListener("touchend", this.stopDrag)
152 |     },
153 | 
154 |     beforeDestroy(){
155 |       // Remove the Listener
156 |       document.removeEventListener("mousemove", this.onDrag)
157 |       document.removeEventListener("touchmove", this.onDrag)
158 |       document.removeEventListener("mouseup", this.stopDrag)
159 |       document.removeEventListener("touchend", this.stopDrag)
160 |     }
161 | 
162 |   };
163 | 
164 | </script>
165 | 


--------------------------------------------------------------------------------
/src/js/components/vue-scrollbar.vue:
--------------------------------------------------------------------------------
  1 | 
  2 | <template lang="jade">
  3 | .vue-scrollbar__wrapper(
  4 |   v-el:scroll-wrapper
  5 |   v-bind:class="classes ? ' ' + classes : ''")
  6 |   .vue-scrollbar__area(
  7 |     @wheel="scroll"
  8 |     v-el:scroll-area
  9 |     @touchstart="startDrag"
 10 |     @touchmove="onDrag"
 11 |     @touchend="stopDrag"
 12 |     v-bind:class="(dragging ? '' : 'vue-scrollbar-transition')"
 13 |     v-bind:style="{ 'margin-top': top * -1 +'px', 'margin-left': left * -1 +'px' }"
 14 |   )
 15 | 
 16 |     slot
 17 | 
 18 |   vertical-scrollbar(
 19 |     v-if="ready"
 20 |     v-bind:area="{ height: scrollAreaHeight }"
 21 |     v-bind:wrapper="{ height: scrollWrapperHeight }"
 22 |     v-bind:scrolling="{ v: vMovement }"
 23 |     v-bind:dragging-from-parent="dragging"
 24 |     v-bind:on-change-position="handleChangePosition"
 25 |   )
 26 | 
 27 |   horizontal-scrollbar(
 28 |     v-if="ready"
 29 |     v-bind:area="{ width: scrollAreaWidth }"
 30 |     v-bind:wrapper="{ width: scrollWrapperWidth }"
 31 |     v-bind:scrolling="{ h: hMovement }"
 32 |     v-bind:dragging-from-parent="dragging"
 33 |     v-bind:on-change-position="handleChangePosition"
 34 |   )
 35 | 
 36 | </template>
 37 | 
 38 | <style lang="sass">
 39 |   @import "../../sass/_Scrollbar.sass";
 40 | </style>
 41 | 
 42 | <script>
 43 | 
 44 |   import verticalScrollbar from './vertical-scrollbar.vue';
 45 |   import horizontalScrollbar from './horizontal-scrollbar.vue';
 46 | 
 47 | 
 48 |   export default {
 49 | 
 50 |     props: {
 51 |       classes: {
 52 |         type: String,
 53 |         default: ""
 54 |       },
 55 |       speed: {
 56 |         type: Number,
 57 |         default: 53
 58 |       }
 59 |     },
 60 | 
 61 |     data(){
 62 |       return{
 63 |         ready: false,
 64 |         scrollY: null,
 65 |         scrollX: null,
 66 |         top: 0,
 67 |         left: 0,
 68 |         scrollAreaHeight: null,
 69 |         scrollAreaWidth: null,
 70 |         scrollWrapperHeight: null,
 71 |         scrollWrapperWidth: null,
 72 |         verticalHeight: null,
 73 |         vMovement: 0,
 74 |         hMovement: 0,
 75 |         dragging: false,
 76 |         start: { y: 0, x: 0}
 77 |       }
 78 |     },
 79 | 
 80 |     components: { verticalScrollbar, horizontalScrollbar },
 81 | 
 82 |     methods: {
 83 |       scroll(e){
 84 |         e.preventDefault()
 85 | 
 86 |         // Set the wheel step
 87 |         let num = this.speed
 88 | 
 89 |         // DOM events
 90 |         let shifted = e.shiftKey
 91 |         this.scrollY = e.deltaY > 0 ? num : -(num)
 92 |         this.scrollX = e.deltaX > 0 ? num : -(num)
 93 | 
 94 |         // Fix Mozilla Shifted Wheel~
 95 |         if(shifted && e.deltaX == 0) this.scrollX = e.deltaY > 0 ? num : -(num)
 96 | 
 97 |         // Next Value
 98 |         let nextY = this.top + this.scrollY
 99 |         let nextX = this.left + this.scrollX
100 | 
101 |         // Is it Scrollable?
102 |         let canScrollY = this.scrollAreaHeight > this.scrollWrapperHeight
103 |         let canScrollX = this.scrollAreaWidth > this.scrollWrapperWidth
104 | 
105 |         // Vertical Scrolling
106 |         if(canScrollY && !shifted) {
107 |           this.normalizeVertical(nextY)
108 |           this.moveTheScrollbar()
109 |         }
110 | 
111 |         // // Horizontal Scrolling
112 |         if(shifted && canScrollX) {
113 |           this.normalizeHorizontal(nextX)
114 |           this.moveTheScrollbar()
115 |         }
116 | 
117 |       },
118 | 
119 |       // DRAG EVENT JUST FOR TOUCH DEVICE~
120 |       startDrag(e){
121 | 
122 |         e.preventDefault()
123 |         e.stopPropagation()
124 | 
125 |         e = e.changedTouches ? e.changedTouches[0] : e
126 | 
127 | 
128 |         // Prepare to drag
129 |         this.dragging = true
130 |         this.start.y = e.pageY
131 |         this.start.x = e.pageX
132 | 
133 | 
134 |       },
135 |       onDrag(e){
136 | 
137 |         if(this.dragging){
138 | 
139 |           e.preventDefault()
140 |           e = e.changedTouches ? e.changedTouches[0] : e
141 | 
142 | 
143 |           // Invers the Movement
144 |           let yMovement = this.start.y - e.pageY
145 |           let xMovement = this.start.x - e.pageX
146 | 
147 | 
148 |           // Update the last e.page
149 |           this.start.y = e.pageY
150 |           this.start.x = e.pageX
151 | 
152 | 
153 |           // The next Vertical Value will be
154 |           let nextY = this.top + yMovement
155 |           let nextX = this.left + xMovement
156 | 
157 | 
158 |           this.normalizeVertical(nextY)
159 |           this.normalizeHorizontal(nextX)
160 | 
161 |           this.moveTheScrollbar()
162 |         }
163 | 
164 |       },
165 | 
166 |       stopDrag(e){
167 |         this.dragging = false
168 |       },
169 | 
170 | 
171 |       normalizeVertical(nextY){
172 |         // Vertical Scrolling
173 |         let lowerEnd = this.scrollAreaHeight - this.scrollWrapperHeight
174 | 
175 |         // Max Scroll Down
176 |         if(nextY > lowerEnd) nextY = lowerEnd
177 | 
178 |         // Max Scroll Up
179 |         else if(nextY < 0) nextY = 0
180 | 
181 |         // Update the Vertical Value
182 |         this.top = nextY
183 |       },
184 | 
185 |       normalizeHorizontal(next){
186 |         // Horizontal Scrolling
187 |         let rightEnd = this.scrollAreaWidth - this.scrollWrapperWidth
188 | 
189 |         // Max Scroll Right
190 |         if(next > rightEnd) next = rightEnd;
191 | 
192 |         // Max Scroll Right
193 |         else if(next < 0) next = 0
194 | 
195 |         // Update the Horizontal Value
196 |         this.left = next
197 |       },
198 | 
199 | 
200 |       moveTheScrollbar(){
201 |         this.vMovement = this.top / this.scrollAreaHeight * 100;
202 |         this.hMovement = this.left / this.scrollAreaWidth * 100;
203 |       },
204 | 
205 | 
206 |       handleChangePosition(vScrollbar, orientation){
207 |         // Convert Percentage to Pixel
208 |         let next = vScrollbar / 100 * ( orientation == 'vertical' ? this.scrollAreaHeight : this.scrollAreaWidth )
209 |         if( orientation == 'vertical' ) this.normalizeVertical(next)
210 |         if( orientation == 'horizontal' ) this.normalizeHorizontal(next)
211 |       },
212 | 
213 |       calculateSize(){
214 |         // The Elements
215 |         let $scrollArea = this.$els.scrollArea
216 |         let $scrollWrapper = this.$els.scrollWrapper
217 | 
218 |         // Computed Style
219 |         let scrollWrapperStyle = window.getComputedStyle($scrollWrapper,null)
220 | 
221 |         // Scroll Area Height and Width
222 |         this.scrollAreaHeight = $scrollArea.children[0].clientHeight
223 |         this.scrollAreaWidth = $scrollArea.children[0].clientWidth
224 | 
225 |         // Scroll Wrapper Height and Width
226 |         this.scrollWrapperHeight = parseFloat(scrollWrapperStyle.height)
227 |         this.scrollWrapperWidth = parseFloat(scrollWrapperStyle.width)
228 | 
229 |         // Make sure The wrapper is Ready, then render the scrollbar
230 |         this.ready = true
231 |       }
232 | 
233 |     },
234 | 
235 |     ready(){
236 |       this.calculateSize()
237 | 
238 |       // Attach The Event for Responsive View~
239 |       window.addEventListener('resize', this.calculateSize)
240 |     },
241 | 
242 |     beforeDestroy(){
243 |       // Remove Event
244 |       window.removeEventListener('resize', this.calculateSize)
245 |     }
246 | 
247 | 
248 |   };
249 | 
250 | </script>
251 | 


--------------------------------------------------------------------------------