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>