vue-coe-scrollbar - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

dist/vue-coe-scrollbar.cjs.js

@@ -10,2 +10,9 @@ 'use strict';
   return function () { return el.removeEventListener.apply(el, [ event, callback ].concat( options )); };
+} // ty @giseudo
+
+function easeInOutQuad(time, start, change, duration) {
+  time /= duration / 2;
+  if (time < 1) { return change / 2 * time * time + start; }
+  time--;
+  return -change / 2 * (time * (time - 2) - 1) + start;
 }
@@ -28,2 +35,11 @@
       default: 1500
+    },
+    scrollDuration: {
+      type: Number,
+      default: 300
+    },
+    speed: {
+      type: Number,
+      default: 0.1,
+      validator: function (speed) { return speed >= 0.1 && speed <= 1; }
     }
@@ -34,8 +50,15 @@ },
     return {
-      timer: 0,
       mutation: null,
       dragging: false,
+      showScroll: true,
+      activeScroll: true,
+      timer: 0,
+      height: 0,
+      fullHeight: 0,
       lastPosition: 0,
-      showScroll: true,
-      activeScroll: true
+      scrollPosition: 0,
+      scrollbarHeight: 0,
+      scrollbarWidth: 20,
+      userSelect: 'auto',
+      scrollDisplay: 'block'
     };
@@ -45,5 +68,5 @@ },
   watch: {
-    $route: function $route() {
-      // TODO
-      console.log('wip');
+    scrollPosition: function scrollPosition(value) {
+      if (value <= 0) { this.scrollPosition = 0; }
+      if (value >= this.scrollTotal) { this.scrollPosition = this.scrollTotal; }
     }
@@ -62,3 +85,56 @@
 
+  computed: {
+    translateY: function translateY() {
+      return {
+        '--user-select': this.userSelect,
+        '--position-scroll': this.scrollPosition + 'px',
+        '--position-content': this.contentPosition + 'px'
+      };
+    },
+
+    total: function total() {
+      return Math.ceil(this.fullHeight - this.height);
+    },
+
+    scrollTotal: function scrollTotal() {
+      return this.height - this.scrollbarHeight;
+    },
+
+    contentPosition: function contentPosition() {
+      var percentage = 100 * this.scrollPosition / this.scrollTotal;
+      if (percentage <= 0) { return 0; }
+      if (percentage >= 100) { return -this.total; }
+      return -(percentage / 100 * this.total);
+    }
+
+  },
   methods: {
+    setHeights: function setHeights() {
+      var ref = this.$refs;
+      var wrapper = ref.wrapper;
+      this.height = wrapper.clientHeight;
+      this.fullHeight = wrapper.scrollHeight;
+      this.scrollbarHeight = Math.ceil(Math.pow(this.height, 2) / this.fullHeight);
+    },
+
+    handleScroll: function handleScroll() {
+      this.setHeights();
+      this.scrollbarWidth = 20 / window.devicePixelRatio.toFixed(2); // remove scrollbar
+
+      if (this.fullHeight <= this.height) {
+        this.activeScroll = false;
+        this.scrollDisplay = 'none';
+        return;
+      }
+
+      this.activeScroll = true;
+      this.scrollDisplay = 'block';
+    },
+
+    setPosition: function setPosition() {
+      this.show();
+      this.handleScroll();
+      this.hide();
+    },
+
     onScroll: function onScroll(ref) {
@@ -69,3 +145,3 @@ var deltaY = ref.deltaY;
       this.show();
-      this.$refs.wrapper.scrollTop += deltaY;
+      this.scrollPosition += Math.ceil(deltaY * this.speed);
       this.hide();
@@ -79,4 +155,4 @@ },
       this.show();
+      this.userSelect = 'none';
       this.lastPosition = currentY;
-      this.$refs.wrapper.style.userSelect = 'none';
     },
@@ -88,3 +164,3 @@
       if (!this.dragging) { return; }
-      this.$refs.wrapper.scrollTop += (currentY - this.lastPosition) / this.$refs.scrollbar.scaling;
+      this.scrollPosition += currentY - this.lastPosition;
       this.lastPosition = currentY;
@@ -96,38 +172,21 @@ },
       this.hide();
-      this.$refs.wrapper.style.userSelect = 'auto';
+      this.userSelect = 'auto';
     },
 
-    handleScroll: function handleScroll() {
-      var ref = this.$refs;
-      var wrapper = ref.wrapper;
-      var scrollbar = ref.scrollbar;
-      var fullscrollbar = ref.fullscrollbar;
-      var content = ref.content;
-      var height = wrapper.clientHeight;
-      var fullHeight = content.scrollHeight; // remove scrollbar
+    scrollTo: function scrollTo(position) {
+      var this$1 = this;
 
-      if (fullHeight <= height) {
-        this.activeScroll = false;
-        scrollbar.style.display = 'none';
-        return;
-      }
+      var percentage = 100 * position / this.fullHeight;
+      var time = 0;
+      var increment = 20;
+      var start = this.scrollPosition;
+      var end = this.scrollPosition + percentage / 100 * this.scrollTotal;
 
-      var maxScrollTop = fullHeight - height;
-      var scrollbarHeight = Math.pow(height, 2) / fullHeight;
-      var maxTopOffset = height - scrollbarHeight;
-      this.activeScroll = true;
-      scrollbar.style.display = 'block';
-      scrollbar.style.height = scrollbarHeight + "px";
-      scrollbar.scaling = maxTopOffset / maxScrollTop;
-      fullscrollbar.style.height = fullHeight + 'px';
-    },
+      var animate = function () {
+        time += increment;
+        this$1.scrollPosition = easeInOutQuad(time, start, end - start, this$1.scrollDuration);
+        if (time < this$1.scrollDuration) { requestAnimationFrame(animate); }
+      };
 
-    setPosition: function setPosition() {
-      this.show();
-      this.handleScroll();
-      var ref = this.$refs;
-      var scrollbar = ref.scrollbar;
-      var x = 1 / scrollbar.scaling;
-      scrollbar.style.transform = "\n        scale(" + x + ")\n        matrix3d(\n          1, 0, 0, 0,\n          0, 1, 0, 0,\n          0, 0, 1, 0,\n          0, 0, 0, -1\n        )\n        translateZ(" + (-1 - x) + "px)\n      ";
-      this.hide();
+      animate();
     },
@@ -148,6 +207,3 @@
       var position = wrapper.scrollTop + increment;
-      wrapper.scrollTo({
-        top: position,
-        behavior: 'smooth'
-      });
+      this.scrollTo(position);
     },
@@ -169,4 +225,3 @@
     bindEvents: function bindEvents() {
-      this.$eventsBinded = [bindEvent(window, 'wheel', this.onScroll), // scroll
-      // resize event
+      this.$eventsBinded = [// resize event
       // to trigger on zoom
@@ -178,2 +233,5 @@ // resizable observer does not detect this change
       }), // end
+      bindEvent(window, 'wheel', this.onScroll, {
+        passive: true
+      }), // scroll
       bindEvent(this.$refs.scrollbar, 'mousedown', this.dragStart, {
@@ -299,3 +357,8 @@ passive: true
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"wrapper",staticClass:"vue-coe-scroll"},[_c('div',{ref:"fullscrollbar",staticClass:"full-scrollbar",on:{"mousedown":_vm.onClick,"mouseover":_vm.show,"mouseout":_vm.hide}}),_vm._v(" "),_c('div',{ref:"scrollbar",staticClass:"scrollbar",style:({ opacity: +_vm.showScroll }),on:{"mouseover":_vm.show,"mouseout":_vm.hide}}),_vm._v(" "),_c('div',{ref:"content",staticClass:"content"},[_vm._t("default")],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"wrapper",staticClass:"vue-coe-scroll",style:(_vm.translateY)},[_c('div',{ref:"fullscrollbar",staticClass:"full-scrollbar",style:({ height: _vm.fullHeight + 'px' }),on:{"mouseout":_vm.hide,"mouseover":_vm.show,"mousedown":_vm.onClick}}),_vm._v(" "),_c('div',{ref:"scrollbar",staticClass:"scrollbar",style:({
+      opacity: +_vm.showScroll,
+      display: _vm.scrollDisplay,
+      width: _vm.scrollbarWidth + 'px',
+      height: _vm.scrollbarHeight + 'px'
+    }),on:{"mouseout":_vm.hide,"mouseover":_vm.show}}),_vm._v(" "),_c('div',{ref:"content",staticClass:"content"},[_vm._t("default")],2)])};
 var __vue_staticRenderFns__ = [];
@@ -302,0 +365,0 @@

dist/vue-coe-scrollbar.es.js

@@ -8,2 +8,9 @@ // ty @vinicius73
   return function () { return el.removeEventListener.apply(el, [ event, callback ].concat( options )); };
+} // ty @giseudo
+
+function easeInOutQuad(time, start, change, duration) {
+  time /= duration / 2;
+  if (time < 1) { return change / 2 * time * time + start; }
+  time--;
+  return -change / 2 * (time * (time - 2) - 1) + start;
 }
@@ -26,2 +33,11 @@
       default: 1500
+    },
+    scrollDuration: {
+      type: Number,
+      default: 300
+    },
+    speed: {
+      type: Number,
+      default: 0.1,
+      validator: function (speed) { return speed >= 0.1 && speed <= 1; }
     }
@@ -32,8 +48,15 @@ },
     return {
-      timer: 0,
       mutation: null,
       dragging: false,
+      showScroll: true,
+      activeScroll: true,
+      timer: 0,
+      height: 0,
+      fullHeight: 0,
       lastPosition: 0,
-      showScroll: true,
-      activeScroll: true
+      scrollPosition: 0,
+      scrollbarHeight: 0,
+      scrollbarWidth: 20,
+      userSelect: 'auto',
+      scrollDisplay: 'block'
     };
@@ -43,5 +66,5 @@ },
   watch: {
-    $route: function $route() {
-      // TODO
-      console.log('wip');
+    scrollPosition: function scrollPosition(value) {
+      if (value <= 0) { this.scrollPosition = 0; }
+      if (value >= this.scrollTotal) { this.scrollPosition = this.scrollTotal; }
     }
@@ -60,3 +83,56 @@
 
+  computed: {
+    translateY: function translateY() {
+      return {
+        '--user-select': this.userSelect,
+        '--position-scroll': this.scrollPosition + 'px',
+        '--position-content': this.contentPosition + 'px'
+      };
+    },
+
+    total: function total() {
+      return Math.ceil(this.fullHeight - this.height);
+    },
+
+    scrollTotal: function scrollTotal() {
+      return this.height - this.scrollbarHeight;
+    },
+
+    contentPosition: function contentPosition() {
+      var percentage = 100 * this.scrollPosition / this.scrollTotal;
+      if (percentage <= 0) { return 0; }
+      if (percentage >= 100) { return -this.total; }
+      return -(percentage / 100 * this.total);
+    }
+
+  },
   methods: {
+    setHeights: function setHeights() {
+      var ref = this.$refs;
+      var wrapper = ref.wrapper;
+      this.height = wrapper.clientHeight;
+      this.fullHeight = wrapper.scrollHeight;
+      this.scrollbarHeight = Math.ceil(Math.pow(this.height, 2) / this.fullHeight);
+    },
+
+    handleScroll: function handleScroll() {
+      this.setHeights();
+      this.scrollbarWidth = 20 / window.devicePixelRatio.toFixed(2); // remove scrollbar
+
+      if (this.fullHeight <= this.height) {
+        this.activeScroll = false;
+        this.scrollDisplay = 'none';
+        return;
+      }
+
+      this.activeScroll = true;
+      this.scrollDisplay = 'block';
+    },
+
+    setPosition: function setPosition() {
+      this.show();
+      this.handleScroll();
+      this.hide();
+    },
+
     onScroll: function onScroll(ref) {
@@ -67,3 +143,3 @@ var deltaY = ref.deltaY;
       this.show();
-      this.$refs.wrapper.scrollTop += deltaY;
+      this.scrollPosition += Math.ceil(deltaY * this.speed);
       this.hide();
@@ -77,4 +153,4 @@ },
       this.show();
+      this.userSelect = 'none';
       this.lastPosition = currentY;
-      this.$refs.wrapper.style.userSelect = 'none';
     },
@@ -86,3 +162,3 @@
       if (!this.dragging) { return; }
-      this.$refs.wrapper.scrollTop += (currentY - this.lastPosition) / this.$refs.scrollbar.scaling;
+      this.scrollPosition += currentY - this.lastPosition;
       this.lastPosition = currentY;
@@ -94,38 +170,21 @@ },
       this.hide();
-      this.$refs.wrapper.style.userSelect = 'auto';
+      this.userSelect = 'auto';
     },
 
-    handleScroll: function handleScroll() {
-      var ref = this.$refs;
-      var wrapper = ref.wrapper;
-      var scrollbar = ref.scrollbar;
-      var fullscrollbar = ref.fullscrollbar;
-      var content = ref.content;
-      var height = wrapper.clientHeight;
-      var fullHeight = content.scrollHeight; // remove scrollbar
+    scrollTo: function scrollTo(position) {
+      var this$1 = this;
 
-      if (fullHeight <= height) {
-        this.activeScroll = false;
-        scrollbar.style.display = 'none';
-        return;
-      }
+      var percentage = 100 * position / this.fullHeight;
+      var time = 0;
+      var increment = 20;
+      var start = this.scrollPosition;
+      var end = this.scrollPosition + percentage / 100 * this.scrollTotal;
 
-      var maxScrollTop = fullHeight - height;
-      var scrollbarHeight = Math.pow(height, 2) / fullHeight;
-      var maxTopOffset = height - scrollbarHeight;
-      this.activeScroll = true;
-      scrollbar.style.display = 'block';
-      scrollbar.style.height = scrollbarHeight + "px";
-      scrollbar.scaling = maxTopOffset / maxScrollTop;
-      fullscrollbar.style.height = fullHeight + 'px';
-    },
+      var animate = function () {
+        time += increment;
+        this$1.scrollPosition = easeInOutQuad(time, start, end - start, this$1.scrollDuration);
+        if (time < this$1.scrollDuration) { requestAnimationFrame(animate); }
+      };
 
-    setPosition: function setPosition() {
-      this.show();
-      this.handleScroll();
-      var ref = this.$refs;
-      var scrollbar = ref.scrollbar;
-      var x = 1 / scrollbar.scaling;
-      scrollbar.style.transform = "\n        scale(" + x + ")\n        matrix3d(\n          1, 0, 0, 0,\n          0, 1, 0, 0,\n          0, 0, 1, 0,\n          0, 0, 0, -1\n        )\n        translateZ(" + (-1 - x) + "px)\n      ";
-      this.hide();
+      animate();
     },
@@ -146,6 +205,3 @@
       var position = wrapper.scrollTop + increment;
-      wrapper.scrollTo({
-        top: position,
-        behavior: 'smooth'
-      });
+      this.scrollTo(position);
     },
@@ -167,4 +223,3 @@
     bindEvents: function bindEvents() {
-      this.$eventsBinded = [bindEvent(window, 'wheel', this.onScroll), // scroll
-      // resize event
+      this.$eventsBinded = [// resize event
       // to trigger on zoom
@@ -176,2 +231,5 @@ // resizable observer does not detect this change
       }), // end
+      bindEvent(window, 'wheel', this.onScroll, {
+        passive: true
+      }), // scroll
       bindEvent(this.$refs.scrollbar, 'mousedown', this.dragStart, {
@@ -297,3 +355,8 @@ passive: true
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"wrapper",staticClass:"vue-coe-scroll"},[_c('div',{ref:"fullscrollbar",staticClass:"full-scrollbar",on:{"mousedown":_vm.onClick,"mouseover":_vm.show,"mouseout":_vm.hide}}),_vm._v(" "),_c('div',{ref:"scrollbar",staticClass:"scrollbar",style:({ opacity: +_vm.showScroll }),on:{"mouseover":_vm.show,"mouseout":_vm.hide}}),_vm._v(" "),_c('div',{ref:"content",staticClass:"content"},[_vm._t("default")],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"wrapper",staticClass:"vue-coe-scroll",style:(_vm.translateY)},[_c('div',{ref:"fullscrollbar",staticClass:"full-scrollbar",style:({ height: _vm.fullHeight + 'px' }),on:{"mouseout":_vm.hide,"mouseover":_vm.show,"mousedown":_vm.onClick}}),_vm._v(" "),_c('div',{ref:"scrollbar",staticClass:"scrollbar",style:({
+      opacity: +_vm.showScroll,
+      display: _vm.scrollDisplay,
+      width: _vm.scrollbarWidth + 'px',
+      height: _vm.scrollbarHeight + 'px'
+    }),on:{"mouseout":_vm.hide,"mouseover":_vm.show}}),_vm._v(" "),_c('div',{ref:"content",staticClass:"content"},[_vm._t("default")],2)])};
 var __vue_staticRenderFns__ = [];
@@ -300,0 +363,0 @@

dist/vue-coe-scrollbar.js

@@ -14,2 +14,9 @@ (function (global, factory) {
     return function () { return el.removeEventListener.apply(el, [ event, callback ].concat( options )); };
+  } // ty @giseudo
+
+  function easeInOutQuad(time, start, change, duration) {
+    time /= duration / 2;
+    if (time < 1) { return change / 2 * time * time + start; }
+    time--;
+    return -change / 2 * (time * (time - 2) - 1) + start;
   }
@@ -32,2 +39,11 @@
         default: 1500
+      },
+      scrollDuration: {
+        type: Number,
+        default: 300
+      },
+      speed: {
+        type: Number,
+        default: 0.1,
+        validator: function (speed) { return speed >= 0.1 && speed <= 1; }
       }
@@ -38,8 +54,15 @@ },
       return {
-        timer: 0,
         mutation: null,
         dragging: false,
+        showScroll: true,
+        activeScroll: true,
+        timer: 0,
+        height: 0,
+        fullHeight: 0,
         lastPosition: 0,
-        showScroll: true,
-        activeScroll: true
+        scrollPosition: 0,
+        scrollbarHeight: 0,
+        scrollbarWidth: 20,
+        userSelect: 'auto',
+        scrollDisplay: 'block'
       };
@@ -49,5 +72,5 @@ },
     watch: {
-      $route: function $route() {
-        // TODO
-        console.log('wip');
+      scrollPosition: function scrollPosition(value) {
+        if (value <= 0) { this.scrollPosition = 0; }
+        if (value >= this.scrollTotal) { this.scrollPosition = this.scrollTotal; }
       }
@@ -66,3 +89,56 @@
 
+    computed: {
+      translateY: function translateY() {
+        return {
+          '--user-select': this.userSelect,
+          '--position-scroll': this.scrollPosition + 'px',
+          '--position-content': this.contentPosition + 'px'
+        };
+      },
+
+      total: function total() {
+        return Math.ceil(this.fullHeight - this.height);
+      },
+
+      scrollTotal: function scrollTotal() {
+        return this.height - this.scrollbarHeight;
+      },
+
+      contentPosition: function contentPosition() {
+        var percentage = 100 * this.scrollPosition / this.scrollTotal;
+        if (percentage <= 0) { return 0; }
+        if (percentage >= 100) { return -this.total; }
+        return -(percentage / 100 * this.total);
+      }
+
+    },
     methods: {
+      setHeights: function setHeights() {
+        var ref = this.$refs;
+        var wrapper = ref.wrapper;
+        this.height = wrapper.clientHeight;
+        this.fullHeight = wrapper.scrollHeight;
+        this.scrollbarHeight = Math.ceil(Math.pow(this.height, 2) / this.fullHeight);
+      },
+
+      handleScroll: function handleScroll() {
+        this.setHeights();
+        this.scrollbarWidth = 20 / window.devicePixelRatio.toFixed(2); // remove scrollbar
+
+        if (this.fullHeight <= this.height) {
+          this.activeScroll = false;
+          this.scrollDisplay = 'none';
+          return;
+        }
+
+        this.activeScroll = true;
+        this.scrollDisplay = 'block';
+      },
+
+      setPosition: function setPosition() {
+        this.show();
+        this.handleScroll();
+        this.hide();
+      },
+
       onScroll: function onScroll(ref) {
@@ -73,3 +149,3 @@ var deltaY = ref.deltaY;
         this.show();
-        this.$refs.wrapper.scrollTop += deltaY;
+        this.scrollPosition += Math.ceil(deltaY * this.speed);
         this.hide();
@@ -83,4 +159,4 @@ },
         this.show();
+        this.userSelect = 'none';
         this.lastPosition = currentY;
-        this.$refs.wrapper.style.userSelect = 'none';
       },
@@ -92,3 +168,3 @@
         if (!this.dragging) { return; }
-        this.$refs.wrapper.scrollTop += (currentY - this.lastPosition) / this.$refs.scrollbar.scaling;
+        this.scrollPosition += currentY - this.lastPosition;
         this.lastPosition = currentY;
@@ -100,38 +176,21 @@ },
         this.hide();
-        this.$refs.wrapper.style.userSelect = 'auto';
+        this.userSelect = 'auto';
       },
 
-      handleScroll: function handleScroll() {
-        var ref = this.$refs;
-        var wrapper = ref.wrapper;
-        var scrollbar = ref.scrollbar;
-        var fullscrollbar = ref.fullscrollbar;
-        var content = ref.content;
-        var height = wrapper.clientHeight;
-        var fullHeight = content.scrollHeight; // remove scrollbar
+      scrollTo: function scrollTo(position) {
+        var this$1 = this;
 
-        if (fullHeight <= height) {
-          this.activeScroll = false;
-          scrollbar.style.display = 'none';
-          return;
-        }
+        var percentage = 100 * position / this.fullHeight;
+        var time = 0;
+        var increment = 20;
+        var start = this.scrollPosition;
+        var end = this.scrollPosition + percentage / 100 * this.scrollTotal;
 
-        var maxScrollTop = fullHeight - height;
-        var scrollbarHeight = Math.pow(height, 2) / fullHeight;
-        var maxTopOffset = height - scrollbarHeight;
-        this.activeScroll = true;
-        scrollbar.style.display = 'block';
-        scrollbar.style.height = scrollbarHeight + "px";
-        scrollbar.scaling = maxTopOffset / maxScrollTop;
-        fullscrollbar.style.height = fullHeight + 'px';
-      },
+        var animate = function () {
+          time += increment;
+          this$1.scrollPosition = easeInOutQuad(time, start, end - start, this$1.scrollDuration);
+          if (time < this$1.scrollDuration) { requestAnimationFrame(animate); }
+        };
 
-      setPosition: function setPosition() {
-        this.show();
-        this.handleScroll();
-        var ref = this.$refs;
-        var scrollbar = ref.scrollbar;
-        var x = 1 / scrollbar.scaling;
-        scrollbar.style.transform = "\n        scale(" + x + ")\n        matrix3d(\n          1, 0, 0, 0,\n          0, 1, 0, 0,\n          0, 0, 1, 0,\n          0, 0, 0, -1\n        )\n        translateZ(" + (-1 - x) + "px)\n      ";
-        this.hide();
+        animate();
       },
@@ -152,6 +211,3 @@
         var position = wrapper.scrollTop + increment;
-        wrapper.scrollTo({
-          top: position,
-          behavior: 'smooth'
-        });
+        this.scrollTo(position);
       },
@@ -173,4 +229,3 @@
       bindEvents: function bindEvents() {
-        this.$eventsBinded = [bindEvent(window, 'wheel', this.onScroll), // scroll
-        // resize event
+        this.$eventsBinded = [// resize event
         // to trigger on zoom
@@ -182,2 +237,5 @@ // resizable observer does not detect this change
         }), // end
+        bindEvent(window, 'wheel', this.onScroll, {
+          passive: true
+        }), // scroll
         bindEvent(this.$refs.scrollbar, 'mousedown', this.dragStart, {
@@ -303,3 +361,8 @@ passive: true
   /* template */
-  var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"wrapper",staticClass:"vue-coe-scroll"},[_c('div',{ref:"fullscrollbar",staticClass:"full-scrollbar",on:{"mousedown":_vm.onClick,"mouseover":_vm.show,"mouseout":_vm.hide}}),_vm._v(" "),_c('div',{ref:"scrollbar",staticClass:"scrollbar",style:({ opacity: +_vm.showScroll }),on:{"mouseover":_vm.show,"mouseout":_vm.hide}}),_vm._v(" "),_c('div',{ref:"content",staticClass:"content"},[_vm._t("default")],2)])};
+  var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"wrapper",staticClass:"vue-coe-scroll",style:(_vm.translateY)},[_c('div',{ref:"fullscrollbar",staticClass:"full-scrollbar",style:({ height: _vm.fullHeight + 'px' }),on:{"mouseout":_vm.hide,"mouseover":_vm.show,"mousedown":_vm.onClick}}),_vm._v(" "),_c('div',{ref:"scrollbar",staticClass:"scrollbar",style:({
+        opacity: +_vm.showScroll,
+        display: _vm.scrollDisplay,
+        width: _vm.scrollbarWidth + 'px',
+        height: _vm.scrollbarHeight + 'px'
+      }),on:{"mouseout":_vm.hide,"mouseover":_vm.show}}),_vm._v(" "),_c('div',{ref:"content",staticClass:"content"},[_vm._t("default")],2)])};
   var __vue_staticRenderFns__ = [];
@@ -306,0 +369,0 @@

package.json

 {
   "name": "vue-coe-scrollbar",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "license": "MIT",
@@ -5,0 +5,0 @@ "cdn": "dist/vue-coe-scrollbar.js",

README.md

 # vue-coe-scrollbar
-:barber: a customizable scroll bar :construction:
 
@@ -25,3 +24,1 @@ ## init
 - sai após x tempo
-
- 

src/services/index.js

@@ -7,1 +7,12 @@ // ty @vinicius73
 }
+
+// ty @giseudo
+export function easeInOutQuad (time, start, change, duration) {
+  time /= duration / 2
+
+  if (time < 1) return change / 2 * time * time + start
+
+  time--
+
+  return -change / 2 * (time * (time - 2) - 1) + start
+}

No alert changes

Improved metrics

Total package byte prevSize

479940

increased by1.33%

Lines of code

984

increased by20.29%

Worsened metrics

Number of lines in readme file

24

decreased by-11.11%

No dependency changes