From 170d0b51dc15df734a408c5006e5c664a98eeff0 Mon Sep 17 00:00:00 2001
From: tmcdos <tmcdos@abv.bg>
Date: Fri, 28 Sep 2018 11:13:53 +0300
Subject: [PATCH] 1) scrollbar size is recalculated when the component is
 updated (usually content is added or removed) 2) width of horizontal
 scrollbar is reduced from 100% when the vertical scrollbar is visible to
 avoid their mutual overlapping 3) height of vertical scrollbar is reduced
 from 100% when the horizontal scrollbar is visible to avoid their overlapping
 4) scrollbar position is properly updated when it was at 100% and inner
 content was removed (otherwise you can no longer scroll - the slider gets
 stuck at the end) 5) got rid of document listeners - they are needless as we
 only want to scroll our container, not the whole page 6) added ability for
 auto-scrolling (e.g. when used in combination with Vue2-Dragula) 7) added
 ability to prevent scrolling on mobile (e.g. when dragging items through
 Vue2-Dragula) - otherwise the scrolling takes precedence over dragging (on
 mobile only) 8) added computed properties to show whether the horizontal or
 vertical scrollbars are currently visible 10) the component emits events
 during scrolling - "scrollx" for horizontal, "scrolly" for vertical and
 "scroll" for any of them

---
 src/js/components/horizontal-scrollbar.vue | 356 ++++-----
 src/js/components/vertical-scrollbar.vue   | 367 +++++-----
 src/js/components/vue-scrollbar.vue        | 812 +++++++++++++--------
 3 files changed, 872 insertions(+), 663 deletions(-)

diff --git a/src/js/components/horizontal-scrollbar.vue b/src/js/components/horizontal-scrollbar.vue
index aeb2b73..f21b5e9 100644
--- a/src/js/components/horizontal-scrollbar.vue
+++ b/src/js/components/horizontal-scrollbar.vue
@@ -1,163 +1,193 @@
-
-<template>
-  <div>
-    <div
-      v-if="width < 100"
-      class="vue-scrollbar__scrollbar-horizontal"
-      ref="container"
-      @click="jump">
-
-      <div
-        :class="'scrollbar' + ( dragging || draggingFromParent ? '' : ' vue-scrollbar-transition')"
-        ref="scrollbar"
-        @touchstart="startDrag"
-        @mousedown="startDrag"
-        :style="{
-          width: this.width+'%',
-          left: this.scrolling + '%'
-        }" >
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-
-  export default {
-
-    props: {
-      draggingFromParent: Boolean,
-      scrolling: Number,
-      wrapper: Object,
-      area: Object,
-      onChangePosition: Function,
-      onDragging: Function,
-      onStopDrag: Function,
-    },
-
-    data () {
-      return  {
-        width: 0,
-        dragging: false,
-        start: 0
-      }
-    },
-
-
-    watch: {
-      'wrapper.width' (val, old) {
-        this.calculateSize(this)
-      },
-
-      'area.width' (val, old) {
-        this.calculateSize(this)
-      }
-    },
-
-
-    methods: {
-
-      startDrag (e) {
-
-        e.preventDefault()
-        e.stopPropagation()
-
-        e = e.changedTouches ? e.changedTouches[0] : e
-
-        // Prepare To Drag
-        this.dragging = true
-        this.start = e.clientX
-
-      },
-
-      onDrag(e){
-
-        if(this.dragging){
-
-          // Make The Parent being in the Dragging State
-          this.onDragging()
-
-          e.preventDefault()
-          e.stopPropagation()
-
-          e = e.changedTouches ? e.changedTouches[0] : e
-
-          let xMovement = e.clientX - this.start
-          let xMovementPercentage = xMovement / this.wrapper.width * 100;
-
-          // Update the last e.clientX
-          this.start = e.clientX
-
-          // The next Horizontal Value will be
-          let next = this.scrolling + xMovementPercentage
-
-          // Tell the parent to change the position
-          this.onChangePosition(next, 'horizontal')
-
-        }
-
-      },
-
-      stopDrag(e){
-        if(this.dragging){
-          // Parent Should Change the Dragging State
-          this.onStopDrag()
-          this.dragging = false
-        }
-      },
-
-      jump(e){
-
-        let isContainer = e.target === this.$refs.container
-
-        if(isContainer){
-
-          // Get the Element Position
-          let position = this.$refs.scrollbar.getBoundingClientRect()
-
-          // Calculate the horizontal Movement
-          let xMovement = e.clientX - position.left
-          let centerize = (this.width / 2)
-          let xMovementPercentage = xMovement / this.wrapper.width * 100 - centerize
-
-          // Update the last e.clientX
-          this.start = e.clientX
-
-          // The next Horizontal Value will be
-          let next = this.scrolling + xMovementPercentage
-
-          // Tell the parent to change the position
-          this.onChangePosition(next, 'horizontal')
-
-        }
-      },
-
-      calculateSize(source){
-        // Scrollbar Width
-        this.width = source.wrapper.width / source.area.width * 100
-      },
-
-    },
-
-    mounted () {
-      this.calculateSize(this)
-
-      // Put the Listener
-      document.addEventListener("mousemove", this.onDrag)
-      document.addEventListener("touchmove", this.onDrag)
-      document.addEventListener("mouseup", this.stopDrag)
-      document.addEventListener("touchend", this.stopDrag)
-    },
-
-    beforeDestroy () {
-      // Remove the Listener
-      document.removeEventListener("mousemove", this.onDrag)
-      document.removeEventListener("touchmove", this.onDrag)
-      document.removeEventListener("mouseup", this.stopDrag)
-      document.removeEventListener("touchend", this.stopDrag)
-    }
-
-  }
-
-</script>
+
+<template>
+  <div
+    v-if="width < 100"
+    class="vue-scrollbar__scrollbar-horizontal"
+    :style="reducedWidth"
+    ref="container"
+    @click="jump">
+
+    <div
+      :class="'scrollbar' + ( dragging || draggingFromParent ? '' : ' vue-scrollbar-transition')"
+      ref="scrollbar"
+      @touchstart="startDrag"
+      @mousedown="startDrag"
+      @mousemove="onDrag"
+      @touchmove="onDrag"
+      @mouseup="stopDrag"
+      @touchend="stopDrag"
+      :style="{
+        width: width+'%',
+        left: scrolling + '%'
+      }" >
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+  export default {
+
+    props: {
+      draggingFromParent: {
+        type: Boolean,
+        default: false,
+      },
+      scrolling: {
+        type: Number,
+        default: 0,
+      },
+      wrapper: {
+        type: Object,
+        default: () => ({}),
+      },
+      area: {
+        type: Object,
+        default: () => ({}),
+      },
+      offset:
+      {
+        type: Number,
+        default: 0
+      },
+      onChangePosition: {
+        type: Function,
+        default: () => false,
+      },
+      onDragging: {
+        type: Function,
+        default: () => false,
+      },
+      onStopDrag: {
+        type: Function,
+        default: () => false,
+      },
+    },
+
+    data () {
+      return  {
+        width: 0,
+        height: 0,
+        dragging: false,
+        start: 0
+      }
+    },
+
+    computed: {
+      reducedWidth() {
+        // vue-scrollbar.vue CSS specifies 18px for the vertical bar width and 1px for the borders
+        // we shrink the width of the horizontal bar so that it does not overlap with the
+        // vertical bar and remove the right border of the horizontal bar - but only if
+        // the vertical bar is currently visible
+        return this.height < 100
+          ? { width: `calc(100% - ${18}px)`, borderRightWidth: 0 }
+          : { width: '100%' };
+      },
+    },
+  
+    watch: {
+      'wrapper.width' (val, old) {
+        this.calculateSize()
+        if(this.scrolling + this.width > 100) this.onChangePosition(100, 'horizontal')
+      },
+
+      'area.width' (val, old) {
+        this.calculateSize()
+        if(this.scrolling + this.width > 100) this.onChangePosition(100, 'horizontal')
+      }
+    },
+
+
+    methods: {
+
+      startDrag (e) {
+
+        e.preventDefault()
+        e.stopPropagation()
+
+        e = e.changedTouches ? e.changedTouches[0] : e
+
+        // Prepare To Drag
+        this.dragging = true
+        this.start = e.clientX
+
+      },
+
+      onDrag(e){
+
+        if(this.dragging){
+
+          // Make The Parent being in the Dragging State
+          this.onDragging()
+
+          e.preventDefault()
+          e.stopPropagation()
+
+          e = e.changedTouches ? e.changedTouches[0] : e
+
+          const xMovement = e.clientX - this.start
+          const xMovementPercentage = xMovement / this.wrapper.width * 100;
+
+          // Update the last e.clientX
+          this.start = e.clientX
+
+          // The next Horizontal Value will be
+          const next = this.scrolling + xMovementPercentage
+
+          // Tell the parent to change the position
+          this.onChangePosition(next, 'horizontal')
+
+        }
+
+      },
+
+      stopDrag(e){
+        if(this.dragging){
+          // Parent Should Change the Dragging State
+          this.onStopDrag()
+          this.dragging = false
+        }
+      },
+
+      jump(e){
+
+        const isContainer = e.target === this.$refs.container
+
+        if(isContainer){
+
+          // Get the Element Position
+          const position = this.$refs.scrollbar.getBoundingClientRect()
+
+          // Calculate the horizontal Movement
+          const xMovement = e.clientX - position.left
+          const centerize = (this.width / 2)
+          const xMovementPercentage = xMovement / this.wrapper.width * 100 - centerize
+
+          // Update the last e.clientX
+          this.start = e.clientX
+
+          // The next Horizontal Value will be
+          const next = this.scrolling + xMovementPercentage
+
+          // Tell the parent to change the position
+          this.onChangePosition(next, 'horizontal')
+
+        }
+      },
+
+      calculateSize(){
+        // Scrollbar Width
+        this.width = this.wrapper.width / this.area.width * 100
+        this.height = (this.wrapper.height / this.area.height) * 100;
+      },
+
+    },
+
+    mounted () {
+      this.calculateSize()
+    },
+
+  }
+
+</script>
diff --git a/src/js/components/vertical-scrollbar.vue b/src/js/components/vertical-scrollbar.vue
index dc7bb07..3cbbd0e 100644
--- a/src/js/components/vertical-scrollbar.vue
+++ b/src/js/components/vertical-scrollbar.vue
@@ -1,179 +1,188 @@
-
-<template>
-  <div>
-    <div
-      v-if="height < 100"
-      class="vue-scrollbar__scrollbar-vertical"
-      ref="container"
-      @click="jump">
-
-      <div
-        :class="'scrollbar' + ( dragging || draggingFromParent ? '' : ' vue-scrollbar-transition')"
-        ref="scrollbar"
-        @touchstart="startDrag"
-        @mousedown="startDrag "
-        :style="{
-          height: height+'%',
-          top: scrolling + '%'
-        }">
-      </div>
-
-    </div>
-  </div>
-</template>
-
-<script>
-
-  export default {
-
-    props: {
-      draggingFromParent: Boolean,
-      scrolling: Number,
-      wrapper: Object,
-      area: Object,
-      onChangePosition: Function,
-      onDragging: Function,
-      onStopDrag: Function,
-    },
-
-    data () {
-      return  {
-        height: 0,
-        dragging: false,
-        start: 0
-      }
-    },
-
-
-    watch: {
-      'wrapper.height' (val, old) {
-        this.calculateSize(this)
-      },
-
-      'area.height' (val, old) {
-        this.calculateSize(this)
-      }
-    },
-
-    methods: {
-
-      startDrag(e){
-
-        e.preventDefault()
-        e.stopPropagation()
-
-        e = e.changedTouches ? e.changedTouches[0] : e
-
-        // Prepare to drag
-        this.dragging = true,
-        this.start = e.clientY
-      },
-
-      onDrag(e){
-
-        if(this.dragging){
-
-          // Make The Parent being in the Dragging State
-          this.onDragging()
-
-          e.preventDefault()
-          e.stopPropagation()
-
-          e = e.changedTouches ? e.changedTouches[0] : e
-
-          let yMovement = e.clientY - this.start
-          let yMovementPercentage = yMovement / this.wrapper.height * 100
-
-          // Update the last e.clientY
-          this.start = e.clientY
-
-          // The next Vertical Value will be
-          let next = this.scrolling + yMovementPercentage
-
-          // Tell the parent to change the position
-          this.onChangePosition(next, 'vertical')
-
-        }
-
-      },
-
-      stopDrag(e){
-        if(this.dragging){
-          // Parent Should Change the Dragging State
-          this.onStopDrag()
-          this.dragging = false
-        }
-      },
-
-      jump(e){
-
-        let isContainer = e.target === this.$refs.container
-
-        if(isContainer){
-
-          // Get the Element Position
-          let position = this.$refs.scrollbar.getBoundingClientRect()
-
-          // Calculate the vertical Movement
-          let yMovement = e.clientY - position.top
-          let centerize = (this.height / 2)
-          let yMovementPercentage = yMovement / this.wrapper.height * 100 - centerize
-
-          // Update the last e.clientY
-          this.start = e.clientY
-
-          // The next Vertical Value will be
-          let next = this.scrolling + yMovementPercentage
-
-          // Tell the parent to change the position
-          this.onChangePosition(next, 'vertical')
-
-        }
-      },
-
-      calculateSize(source){
-        // Scrollbar Height
-        this.height = source.wrapper.height / source.area.height * 100
-      },
-
-      getSize(){
-        // The Elements
-        let $scrollArea = this.$refs.container.parentElement
-        let $scrollWrapper = $scrollArea.parentElement
-
-        // Get new Elements Size
-        let elementSize = {
-          // Scroll Area Height and Width
-          scrollAreaHeight: $scrollArea.children[0].clientHeight,
-          scrollAreaWidth: $scrollArea.children[0].clientWidth,
-
-          // Scroll Wrapper Height and Width
-          scrollWrapperHeight: $scrollWrapper.clientHeight,
-          scrollWrapperWidth: $scrollWrapper.clientWidth,
-        }
-        return elementSize
-      },
-
-    },
-
-    mounted() {
-      this.calculateSize(this)
-
-      // Put the Listener
-      document.addEventListener("mousemove", this.onDrag)
-      document.addEventListener("touchmove", this.onDrag)
-      document.addEventListener("mouseup", this.stopDrag)
-      document.addEventListener("touchend", this.stopDrag)
-    },
-
-    beforeDestroy() {
-      // Remove the Listener
-      document.removeEventListener("mousemove", this.onDrag)
-      document.removeEventListener("touchmove", this.onDrag)
-      document.removeEventListener("mouseup", this.stopDrag)
-      document.removeEventListener("touchend", this.stopDrag)
-    },
-
-  }
-
-</script>
+
+<template>
+  <div
+    v-if="height < 100"
+    class="vue-scrollbar__scrollbar-vertical"
+    :style="reducedHeight"
+    ref="container"
+    @click="jump">
+
+    <div
+      :class="'scrollbar' + ( dragging || draggingFromParent ? '' : ' vue-scrollbar-transition')"
+      ref="scrollbar"
+      @touchstart="startDrag"
+      @mousedown="startDrag"
+      @mousemove="onDrag"
+      @touchmove="onDrag"
+      @mouseup="stopDrag"
+      @touchend="stopDrag"
+      :style="{
+        height: height+'%',
+        top: scrolling + '%'
+      }">
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+  export default {
+
+    props: {
+      draggingFromParent: {
+        type: Boolean,
+        default: false,
+      },
+      scrolling: {
+        type: Number,
+        default: 0,
+      },
+      wrapper: {
+        type: Object,
+        default: () => ({}),
+      },
+      area: {
+        type: Object,
+        default: () => ({}),
+      },
+      offset:
+      {
+        type: Number,
+        default: 0
+      },
+      onChangePosition: {
+        type: Function,
+        default: () => false,
+      },
+      onDragging: {
+        type: Function,
+        default: () => false,
+      },
+      onStopDrag: {
+        type: Function,
+        default: () => false,
+      },
+    },
+
+    data () {
+      return  {
+        height: 0,
+        width: 0,
+        dragging: false,
+        start: 0
+      }
+    },
+
+    computed: {
+      // only used for the horizontal bar, otherwise we get a square in the bottom-right corner
+      // where the underneath scrollArea content is visible
+      reducedHeight() {
+        // vue-scrollbar.vue CSS specifies 18px for the horizontal bar height
+        return { height: this.width < 100 ? `calc(100% - ${18}px)` : '100%' };
+      },
+    },
+
+    watch: {
+      'wrapper.height' (val, old) {
+        this.calculateSize()
+        if(this.scrolling + this.height > 100) this.onChangePosition(100, 'vertical')
+      },
+
+      'area.height' (val, old) {
+        this.calculateSize()
+        if(this.scrolling + this.height > 100) this.onChangePosition(100, 'vertical')
+      }
+    },
+
+    methods: {
+
+      startDrag(e){
+
+        e.preventDefault()
+        e.stopPropagation()
+
+        e = e.changedTouches ? e.changedTouches[0] : e
+
+        // Prepare to drag
+        this.dragging = true,
+        this.start = e.clientY
+      },
+
+      onDrag(e){
+
+        if(this.dragging){
+
+          // Make The Parent being in the Dragging State
+          this.onDragging()
+
+          e.preventDefault()
+          e.stopPropagation()
+
+          e = e.changedTouches ? e.changedTouches[0] : e
+
+          const yMovement = e.clientY - this.start
+          const yMovementPercentage = yMovement / this.wrapper.height * 100
+
+          // Update the last e.clientY
+          this.start = e.clientY
+
+          // The next Vertical Value will be
+          const next = this.scrolling + yMovementPercentage
+
+          // Tell the parent to change the position
+          this.onChangePosition(next, 'vertical')
+
+        }
+
+      },
+
+      stopDrag(e){
+        if(this.dragging){
+          // Parent Should Change the Dragging State
+          this.onStopDrag()
+          this.dragging = false
+        }
+      },
+
+      jump(e){
+
+        const isContainer = e.target === this.$refs.container
+
+        if(isContainer){
+
+          // Get the Element Position
+          const position = this.$refs.scrollbar.getBoundingClientRect()
+
+          // Calculate the vertical Movement
+          const yMovement = e.clientY - position.top
+          const centerize = (this.height / 2)
+          const yMovementPercentage = yMovement / this.wrapper.height * 100 - centerize
+
+          // Update the last e.clientY
+          this.start = e.clientY
+
+          // The next Vertical Value will be
+          const next = this.scrolling + yMovementPercentage
+
+          // Tell the parent to change the position
+          this.onChangePosition(next, 'vertical')
+
+        }
+      },
+
+      calculateSize(){
+        // Scrollbar Height
+        this.height = this.wrapper.height / this.area.height * 100;
+        this.width = (this.wrapper.width / this.area.width) * 100;
+      },
+
+    },
+
+    mounted() {
+      this.calculateSize(this)
+    },
+
+  }
+
+</script>
diff --git a/src/js/components/vue-scrollbar.vue b/src/js/components/vue-scrollbar.vue
index 3e15c22..a6af5a7 100644
--- a/src/js/components/vue-scrollbar.vue
+++ b/src/js/components/vue-scrollbar.vue
@@ -1,322 +1,492 @@
-
-<template>
-  <div
-    @click="calculateSize"
-    :class="'vue-scrollbar__wrapper' + ( this.classes ? ' ' + this.classes : '' )"
-    ref="scrollWrapper"
-    :style="this.styles">
-
-    <div
-      :class="'vue-scrollbar__area' + ( this.dragging ? ' ' : ' vue-scrollbar-transition')"
-      ref="scrollArea"
-      @wheel="scroll"
-      @touchstart="startDrag"
-      @touchmove="onDrag"
-      @touchend="stopDrag"
-      :style="{
-        marginTop: this.top * -1 +'px',
-        marginLeft: this.left * -1 +'px'
-      }">
-
-        <slot></slot>
-
-        <vertical-scrollbar
-          v-if="ready"
-          :area="{ height: scrollAreaHeight }"
-          :wrapper="{ height: scrollWrapperHeight }"
-          :scrolling="vMovement"
-          :dragging-from-parent="dragging"
-          :on-change-position="handleChangePosition"
-          :on-dragging="handleScrollbarDragging"
-          :on-stop-drag="handleScrollbarStopDrag" >
-        </vertical-scrollbar>
-
-        <horizontal-scrollbar
-          v-if="ready"
-          :area="{ width: scrollAreaWidth }"
-          :wrapper="{ width: scrollWrapperWidth }"
-          :scrolling="hMovement"
-          :dragging-from-parent="dragging"
-          :on-change-position="handleChangePosition"
-          :on-dragging="handleScrollbarDragging"
-          :on-stop-drag="handleScrollbarStopDrag">
-        </horizontal-scrollbar>
-
-    </div>
-
-  </div>
-
-</template>
-
-
-<script>
-
-  import VerticalScrollbar from './vertical-scrollbar.vue';
-  import HorizontalScrollbar from './horizontal-scrollbar.vue';
-
-  export default {
-
-    props: {
-      classes: String,
-      styles: Object,
-      speed: {
-        type: Number,
-        default: 53
-      },
-      onMaxScroll: Function,
-    },
-
-    components: {
-      VerticalScrollbar,
-      HorizontalScrollbar
-    },
-
-    data () {
-      return  {
-        ready: false,
-        top: 0,
-        left: 0,
-        scrollAreaHeight: null,
-        scrollAreaWidth: null,
-        scrollWrapperHeight: null,
-        scrollWrapperWidth: null,
-        vMovement: 0,
-        hMovement: 0,
-        dragging: false,
-        start: { y: 0, x: 0},
-        allowBodyScroll: false,
-      }
-    },
-
-    methods: {
-      scroll(e){
-        // Make sure the content height is not changed
-        this.calculateSize(() => {
-          // Set the wheel step
-          let num = this.speed
-
-          // DOM events
-          let shifted = e.shiftKey
-          let scrollY = e.deltaY > 0 ? num : -(num)
-          let scrollX = e.deltaX > 0 ? num : -(num)
-
-          // Fix Mozilla Shifted Wheel~
-          if(shifted && e.deltaX == 0) scrollX = e.deltaY > 0 ? num : -(num)
-
-          // Next Value
-          let nextY = this.top + scrollY
-          let nextX = this.left + scrollX
-
-          // Is it Scrollable?
-          let canScrollY = this.scrollAreaHeight > this.scrollWrapperHeight
-          let canScrollX = this.scrollAreaWidth > this.scrollWrapperWidth
-
-          // Vertical Scrolling
-          if(canScrollY && !shifted) this.normalizeVertical(nextY)
-
-          // Horizontal Scrolling
-          if(shifted && canScrollX) this.normalizeHorizontal(nextX)
-        })
-
-        // prevent Default only if scrolled content is not at the top/bottom
-        if (!this.allowBodyScroll) {
-          e.preventDefault()
-          e.stopPropagation()
-        }
-
-      },
-
-      // DRAG EVENT JUST FOR TOUCH DEVICE~
-      startDrag(e){
-        this.touchEvent = e
-
-        const evt = e.changedTouches ? e.changedTouches[0] : e
-
-        // Make sure the content height is not changed
-        this.calculateSize(() => {
-          // Prepare to drag
-          this.dragging = true,
-          this.start = { y: evt.pageY, x: evt.pageX }
-        })
-      },
-
-      onDrag(e){
-        if(this.dragging){
-          e.preventDefault()
-          e.stopPropagation()
-
-          // Prevent Click Event When it dragging
-          if (this.touchEvent) {
-            this.touchEvent.preventDefault()
-            this.touchEvent.stopPropagation()
+
+<template>
+  <div
+    @click="calculateSize"
+    :class="'vue-scrollbar__wrapper' + ( classes ? ' ' + classes : '' )"
+    ref="scrollWrapper"
+    :style="styles">
+
+    <div
+      :class="'vue-scrollbar__area' + ( dragging ? ' ' : ' vue-scrollbar-transition')"
+      ref="scrollArea"
+      @wheel="scroll"
+      @touchstart="startDrag"
+      @touchmove="onDrag"
+      @touchend="stopDrag"
+      :style="{
+        marginTop: top * -1 +'px',
+        marginLeft: left * -1 +'px',
+        marginBottom: hasHorizontal ? '18px' : '0', // MUST be kept in sync with $bar-size in the SASS
+        marginRight: hasVertical ? '18px' : '0', // these margins ensure that no content is left hidden behind the scroll-bar(s)
+      }">
+
+        <slot></slot>
+    </div>
+
+    <vertical-scrollbar
+      v-if="ready"
+      :area="{ width: scrollAreaWidth, height: scrollAreaHeight }"
+      :wrapper="{ width: scrollWrapperWidth, height: scrollWrapperHeight }"
+      :scrolling="vMovement"
+      :offset="top"
+      :dragging-from-parent="dragging"
+      :on-change-position="handleChangePosition"
+      :on-dragging="handleScrollbarDragging"
+      :on-stop-drag="handleScrollbarStopDrag" >
+    </vertical-scrollbar>
+
+    <horizontal-scrollbar
+      v-if="ready"
+      :area="{ width: scrollAreaWidth, height: scrollAreaHeight }"
+      :wrapper="{ width: scrollWrapperWidth, height: scrollWrapperHeight }"
+      :scrolling="hMovement"
+      :offset="left"
+      :dragging-from-parent="dragging"
+      :on-change-position="handleChangePosition"
+      :on-dragging="handleScrollbarDragging"
+      :on-stop-drag="handleScrollbarStopDrag">
+    </horizontal-scrollbar>
+
+  </div>
+
+</template>
+
+
+<script>
+
+  import VerticalScrollbar from './vertical-scrollbar.vue';
+  import HorizontalScrollbar from './horizontal-scrollbar.vue';
+
+  const margin = 20;
+
+  export default {
+
+    props: {
+      classes: {
+        type: String,
+        default: null,
+      },
+      styles: {
+        type: Object,
+        default: () => ({}),
+      },
+      speed: {
+        type: Number,
+        default: 53,
+      },
+      onMaxScroll: {
+        type: Function,
+        default: () => false,
+      },
+      autoScroll:
+        {
+          type: Boolean,
+          default: false
+        },
+      hold:
+        {
+          type: Boolean,
+          default: false
+        }
+    },
+
+    components: {
+      VerticalScrollbar,
+      HorizontalScrollbar
+    },
+
+    data () {
+      return  {
+        ready: false,
+        top: 0,
+        left: 0,
+        scrollAreaHeight: null,
+        scrollAreaWidth: null,
+        scrollWrapperHeight: null,
+        scrollWrapperWidth: null,
+        vMovement: 0,
+        hMovement: 0,
+        dragging: false,
+        start: { y: 0, x: 0},
+        allowBodyScroll: false,
+        autoX: 0,
+        autoY: 0,
+        wrapRect: {},
+        supportsPassive: false
+      }
+    },
+
+    watch:
+      {
+        autoScroll: 'setAutoScroll',
+      },
+    computed:
+    {
+      hasHorizontal()
+      {
+        return this.scrollAreaWidth > this.scrollWrapperWidth;
+      },
+      hasVertical()
+      {
+        return this.scrollAreaHeight > this.scrollWrapperHeight;
+      }
+    },
+    methods: {
+      setAutoScroll(newValue)
+      {
+        if(newValue) requestAnimationFrame(this.doAutoScroll);
+      },
+      doAutoScroll()
+      {
+        if(this.scrollAreaWidth > this.scrollWrapperWidth && this.autoX != 0) this.normalizeHorizontal(this.left + this.autoX);
+        if(this.scrollAreaHeight > this.scrollWrapperHeight && this.autoY != 0) this.normalizeVertical(this.top + this.autoY);
+        if(this.autoScroll) requestAnimationFrame(this.doAutoScroll);
+      },
+      checkAutoScroll(e)
+      {
+        const rect = this.wrapRect;
+        const evt = e.changedTouches ? e.changedTouches[0] : e;
+        
+        // compute autoX and autoY according to mouse proximity to the container edges
+        if(evt.clientX < rect.left + margin) this.autoX = evt.clientX - (rect.left + margin);
+        else if(evt.clientX > rect.right - margin) this.autoX = evt.clientX - (rect.right - margin);
+        else this.autoX = 0;
+        if(evt.clientY < rect.top + margin) this.autoY = evt.clientY - (rect.top + margin);
+        else if(evt.clientY > rect.bottom - margin) this.autoY = evt.clientY - (rect.bottom - margin);
+        else this.autoY = 0;
+      },
+      scroll(e){
+        // Make sure the content height is not changed
+        this.calculateSize(() => {
+          // Set the wheel step
+          const num = this.speed
+
+          // DOM events
+          const shifted = e.shiftKey,
+            scrollY = e.deltaY > 0 ? num : -(num),
+            scrollX = e.deltaX > 0 ? num : -(num);
+
+          // Fix Mozilla Shifted Wheel~
+          if(shifted && e.deltaX === 0) scrollX = e.deltaY > 0 ? num : -(num)
+
+          // Next Value
+          const nextY = this.top + scrollY
+          const nextX = this.left + scrollX
+
+          // Is it Scrollable?
+          const canScrollY = this.scrollAreaHeight > this.scrollWrapperHeight
+          const canScrollX = this.scrollAreaWidth > this.scrollWrapperWidth
+
+          // Vertical Scrolling
+          if(canScrollY && !shifted) this.normalizeVertical(nextY)
+
+          // Horizontal Scrolling
+          if(shifted && canScrollX) this.normalizeHorizontal(nextX)
+        })
+
+        // prevent Default only if scrolled content is not at the top/bottom
+        if (!this.allowBodyScroll) {
+          e.preventDefault()
+          e.stopPropagation()
+        }
+
+      },
+
+      // DRAG EVENT JUST FOR TOUCH DEVICE~
+      startDrag(e){
+        this.touchEvent = e
+
+        const evt = e.changedTouches ? e.changedTouches[0] : e
+
+        // Make sure the content height is not changed
+        this.calculateSize(() => {
+          // Prepare to drag
+          this.dragging = true,
+          this.start = { y: evt.pageY, x: evt.pageX }
+        })
+      },
+
+      onDrag(e){
+        if(this.dragging && !this.hold){
+          e.preventDefault()
+          e.stopPropagation()
+
+          // Prevent Click Event When it is dragging
+          if (this.touchEvent) {
+            this.touchEvent.preventDefault()
+            this.touchEvent.stopPropagation()
+          }
+
+          const evt = e.changedTouches ? e.changedTouches[0] : e
+
+          // Invers the Movement
+          const yMovement = this.start.y - evt.clientY
+          const xMovement = this.start.x - evt.clientX
+
+          // Update the last e.client
+          this.start = { y: evt.clientY, x: evt.clientX }
+
+          // The next Vertical Value will be
+          const nextY = this.top + yMovement
+          const nextX = this.left + xMovement
+
+          this.normalizeVertical(nextY)
+          this.normalizeHorizontal(nextX)
+
+        }
+      },
+
+      stopDrag(e){
+        this.dragging = false
+        this.touchEvent = false
+      },
+
+      scrollToY(y) {
+        this.normalizeVertical(y)
+      },
+
+      scrollToX(x) {
+        this.normalizeHorizontal(x)
+      },
+
+      normalizeVertical(next){
+        const elementSize = this.getSize()
+
+        // Vertical Scrolling
+        const lowerEnd = elementSize.scrollAreaHeight - elementSize.scrollWrapperHeight
+
+        // Max Scroll Down
+        const maxBottom = next > lowerEnd
+        if(maxBottom) next = lowerEnd
+
+        // Max Scroll Up
+        const maxTop = next < 0
+        if(maxTop) next = 0
+
+
+        // Update the Vertical Value if it's needed
+        const shouldScroll = this.top !== next
+        this.allowBodyScroll = !shouldScroll
+        if (shouldScroll) {
+          this.top = next,
+          this.vMovement = next / elementSize.scrollAreaHeight * 100
+
+          this.$emit('scrolly', next);
+          this.$emit('scroll', { top: this.top, left: this.left });
+          
+          if (this.onMaxScroll && (maxTop || maxBottom)) {
+            this.onMaxScroll({ top: maxTop, bottom: maxBottom, right: false, left: false })
+          }
+        }
+      },
+
+      normalizeHorizontal(next){
+        const elementSize = this.getSize()
+
+        // Horizontal Scrolling
+        const rightEnd = elementSize.scrollAreaWidth - this.scrollWrapperWidth
+
+        // Max Scroll Right
+        const maxRight = next > rightEnd
+        if(maxRight) next = rightEnd;
+
+        // Max Scroll Left
+        const maxLeft = next < 0
+        if(next < 0) next = 0
+
+        // Update the Horizontal Value
+        const shouldScroll = this.left !== next
+        this.allowBodyScroll = !shouldScroll
+        if (shouldScroll) {
+          this.left = next,
+          this.hMovement = next / elementSize.scrollAreaWidth * 100
+
+          this.$emit('scrollx', next);
+          this.$emit('scroll', { top: this.top, left: this.left });
+          
+          if (this.onMaxScroll && (maxRight || maxLeft)) {
+            this.onMaxScroll({ right: maxRight, left: maxLeft, top: false, bottom: false })
+          }
+        }
+      },
+
+      handleChangePosition(movement, orientation){
+        // Make sure the content height is not changed
+        this.calculateSize(() => {
+          // Convert Percentage to Pixel
+          const next = movement / 100
+          if( orientation == 'vertical' ) this.normalizeVertical( next * this.scrollAreaHeight )
+          if( orientation == 'horizontal' ) this.normalizeHorizontal( next * this.scrollAreaWidth )
+        })
+      },
+
+      handleScrollbarDragging(){
+        this.dragging = true
+      },
+
+      handleScrollbarStopDrag(){
+        this.dragging = false
+      },
+
+      getSize(){
+        // The Elements
+        const $scrollArea = this.$refs.scrollArea
+        const $scrollWrapper = this.$refs.scrollWrapper
+        if(!$scrollArea || !$scrollWrapper) return {}
+        // Get new Elements Size
+        this.wrapRect = $scrollWrapper.getBoundingClientRect();
+        return {
+          // Scroll Area Height and Width
+          scrollAreaHeight: $scrollArea.clientHeight,
+          scrollAreaWidth: $scrollArea.clientWidth,
+
+          // Scroll Wrapper Height and Width
+          scrollWrapperHeight: $scrollWrapper.clientHeight - 18, // MUST be kept in sync with $bar-size in the SASS
+          scrollWrapperWidth: $scrollWrapper.clientWidth - 18, // MUST be kept in sync with $bar-size in the SASS
+        }
+      },
+
+      calculateSize(cb){
+        if(typeof cb !== 'function') cb = null;
+
+        const elementSize = this.getSize()
+        if(elementSize == {}) return cb ? cb() : false
+
+        if( elementSize.scrollWrapperHeight !== this.scrollWrapperHeight ||
+            elementSize.scrollWrapperWidth !== this.scrollWrapperWidth ||
+            elementSize.scrollAreaHeight !== this.scrollAreaHeight ||
+            elementSize.scrollAreaWidth !== this.scrollAreaWidth )
+        {
+
+          // Scroll Area Height and Width
+          this.scrollAreaHeight = elementSize.scrollAreaHeight,
+          this.scrollAreaWidth = elementSize.scrollAreaWidth,
+
+          // Scroll Wrapper Height and Width
+          this.scrollWrapperHeight = elementSize.scrollWrapperHeight,
+          this.scrollWrapperWidth = elementSize.scrollWrapperWidth,
+
+          // Make sure The wrapper is Ready, then render the scrollbar
+          this.ready = true
+
+        }
+        return cb ? cb() : false
+      }
+
+    },
+
+    created ()
+    {
+      this.supportsPassive = false;
+      let self = this;
+      try {
+        var opts = {};
+        Object.defineProperty(opts, 'passive', ({
+          get: function get () {
+            /* istanbul ignore next */
+            self.supportsPassive = true;
           }
-
-          let evt = e.changedTouches ? e.changedTouches[0] : e
-
-          // Invers the Movement
-          let yMovement = this.start.y - evt.clientY
-          let xMovement = this.start.x - evt.clientX
-
-          // Update the last e.client
-          this.start = { y: evt.clientY, x: evt.clientX }
-
-          // The next Vertical Value will be
-          let nextY = this.top + yMovement
-          let nextX = this.left + xMovement
-
-          this.normalizeVertical(nextY)
-          this.normalizeHorizontal(nextX)
-
-        }
-      },
-
-      stopDrag(e){
-        this.dragging = false
-        this.touchEvent = false
-      },
-
-      scrollToY(y) {
-        this.normalizeVertical(y)
-      },
-
-      scrollToX(x) {
-        this.normalizeHorizontal(x)
-      },
-
-      normalizeVertical(next){
-        const elementSize = this.getSize()
-
-        // Vertical Scrolling
-        const lowerEnd = elementSize.scrollAreaHeight - elementSize.scrollWrapperHeight
-
-        // Max Scroll Down
-        const maxBottom = next > lowerEnd
-        if(maxBottom) next = lowerEnd
-
-        // Max Scroll Up
-        const maxTop = next < 0
-        if(maxTop) next = 0
-
-
-        // Update the Vertical Value if it's needed
-        const shouldScroll = this.top !== next
-        this.allowBodyScroll = !shouldScroll
-        if (shouldScroll) {
-          this.top = next,
-          this.vMovement = next / elementSize.scrollAreaHeight * 100
-
-          if (this.onMaxScroll && (maxTop || maxBottom)) {
-            this.onMaxScroll({ top: maxTop, bottom: maxBottom, right: false, left: false })
-          }
-        }
-      },
-
-      normalizeHorizontal(next){
-        const elementSize = this.getSize()
-
-        // Horizontal Scrolling
-        const rightEnd = elementSize.scrollAreaWidth - this.scrollWrapperWidth
-
-        // Max Scroll Right
-        const maxRight = next > rightEnd
-        if(maxRight) next = rightEnd;
-
-        // Max Scroll Left
-        const maxLeft = next < 0
-        if(next < 0) next = 0
-
-        // Update the Horizontal Value
-        const shouldScroll = this.left !== next
-        this.allowBodyScroll = !shouldScroll
-        if (shouldScroll) {
-          this.left = next,
-          this.hMovement = next / elementSize.scrollAreaWidth * 100
-
-          if (this.onMaxScroll && (maxRight || maxLeft)) {
-            this.onMaxScroll({ right: maxRight, left: maxLeft, top: false, bottom: false })
-          }
-        }
-      },
-
-      handleChangePosition(movement, orientation){
-        // Make sure the content height is not changed
-        this.calculateSize(() => {
-          // Convert Percentage to Pixel
-          let next = movement / 100
-          if( orientation == 'vertical' ) this.normalizeVertical( next * this.scrollAreaHeight )
-          if( orientation == 'horizontal' ) this.normalizeHorizontal( next * this.scrollAreaWidth )
-        })
-      },
-
-      handleScrollbarDragging(){
-        this.dragging = true
-      },
-
-      handleScrollbarStopDrag(){
-        this.dragging = false
-      },
-
-      getSize(){
-        // The Elements
-        let $scrollArea = this.$refs.scrollArea
-        let $scrollWrapper = this.$refs.scrollWrapper
-
-        // Get new Elements Size
-        let elementSize = {
-          // Scroll Area Height and Width
-          scrollAreaHeight: $scrollArea.children[0].clientHeight,
-          scrollAreaWidth: $scrollArea.children[0].clientWidth,
-
-          // Scroll Wrapper Height and Width
-          scrollWrapperHeight: $scrollWrapper.clientHeight,
-          scrollWrapperWidth: $scrollWrapper.clientWidth,
-        }
-        return elementSize
-      },
-
-      calculateSize(cb){
-        if(typeof cb !== 'function') cb = null;
-
-        let elementSize = this.getSize()
-
-        if( elementSize.scrollWrapperHeight !== this.scrollWrapperHeight ||
-            elementSize.scrollWrapperWidth !== this.scrollWrapperWidth ||
-            elementSize.scrollAreaHeight !== this.scrollAreaHeight ||
-            elementSize.scrollAreaWidth !== this.scrollAreaWidth )
-        {
-
-          // Scroll Area Height and Width
-          this.scrollAreaHeight = elementSize.scrollAreaHeight,
-          this.scrollAreaWidth = elementSize.scrollAreaWidth,
-
-          // Scroll Wrapper Height and Width
-          this.scrollWrapperHeight = elementSize.scrollWrapperHeight,
-          this.scrollWrapperWidth = elementSize.scrollWrapperWidth,
-
-          // Make sure The wrapper is Ready, then render the scrollbar
-          this.ready = true
-
-          return cb ? cb() : false
-        }
-
-        else return cb ? cb() : false
-      }
-
-
-    },
-
-    mounted () {
-      this.calculateSize()
-
-      // Attach The Event for Responsive View~
-      window.addEventListener('resize', this.calculateSize)
-    },
-
-    beforeDestroy (){
-      // Remove Event
-      window.removeEventListener('resize', this.calculateSize)
-    }
-
-  }
-
-</script>
+        })); // https://github.com/facebook/flow/issues/285
+        window.addEventListener('test-passive', null, opts);
+      } catch (e) {}
+    },
+    mounted () {
+      this.calculateSize()
+
+      // Attach The Event for Responsive View
+      window.addEventListener('resize', this.calculateSize)
+      document.addEventListener('mousemove', this.checkAutoScroll, false)
+      document.addEventListener('touchmove', this.checkAutoScroll, this.supportsPassive ? {passive: false} : false)
+    },
+
+    updated ()
+    {
+      const self = this;
+      this.$nextTick(function()
+      {
+        setTimeout(function()
+        {
+          self.calculateSize()
+        },50)
+      })
+    },
+
+    beforeDestroy (){
+      // Remove Event
+      window.removeEventListener('resize', this.calculateSize)
+      document.removeEventListener('mousemove', this.checkAutoScroll)
+      document.removeEventListener('touchmove', this.checkAutoScroll)
+    }
+
+  }
+
+</script>
+
+<style lang="scss">
+$bar-size: 18px; /* MUST be kept in sync with the "getSize()" method above !!!!!! */
+$bar-padding: 3px;
+$bar-rounding: 8px;
+$bar-border: 1px;
+
+.vue-scrollbar-transition,
+.vue-scrollbar__scrollbar-vertical,
+.vue-scrollbar__scrollbar-horizontal {
+  transition: all 0.5s ease;
+}
+
+.vue-scrollbar-transition--scrollbar {
+  transition: opacity 0.5s linear;
+}
+
+.vue-scrollbar__wrapper {
+  margin: 0 auto;
+  overflow: hidden;
+  position: relative;
+}
+
+.vue-scrollbar__scrollbar-vertical,
+.vue-scrollbar__scrollbar-horizontal {
+  position: absolute;
+  background-color: #fff;
+  border: $bar-border solid $stroke;
+}
+
+.vue-scrollbar__scrollbar-vertical:hover,
+.vue-scrollbar__scrollbar-horizontal:hover {
+  /*  background: rgba(0, 0, 0, 0.3);*/
+}
+
+.vue-scrollbar__scrollbar-vertical .scrollbar,
+.vue-scrollbar__scrollbar-horizontal .scrollbar {
+  position: relative;
+  border-radius: $bar-rounding;
+  background: rgba($medium-text, 0.35);
+  cursor: default;
+}
+
+.vue-scrollbar__scrollbar-vertical {
+  width: $bar-size;
+  height: 100%;
+  top: 0;
+  right: 0;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent; 
+}
+
+.vue-scrollbar__scrollbar-vertical .scrollbar {
+  width: $bar-size - 2 * ($bar-padding + $bar-border);
+  margin: 0 $bar-padding;
+}
+
+.vue-scrollbar__scrollbar-horizontal {
+  height: $bar-size;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+}
+
+.vue-scrollbar__scrollbar-horizontal .scrollbar {
+  height: $bar-size - 2 * ($bar-padding + $bar-border);
+  margin: $bar-padding 0;
+}
+</style>