vue-agile-scrollbar - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/vue-agile-scrollbar.es.js

@@ -172,5 +172,5 @@ var props = {
       if (!this.ticking) {
+        const scrollTop = this.$scroll.scrollTop;
+        const scrollLeft = this.$scroll.scrollLeft;
         window.requestAnimationFrame(() => {
-          const scrollTop = this.$scroll.scrollTop;
-          const scrollLeft = this.$scroll.scrollLeft;
           const top = this.offsetTop + Math.floor(scrollTop / this.scrollBarY.multiple);
@@ -184,11 +184,15 @@ if (top !== this.scrollBarY.top) {
           }
-          this.$emit("scroll", {
-            top: scrollTop,
-            left: scrollLeft
-          }, e);
-          if (this._events["scroll-hit"]) {
-            this.onScrollHit(scrollTop, scrollLeft);
-          }
           this.ticking = false;
         });
+        this.$emit("scroll", {
+          top: scrollTop,
+          left: scrollLeft,
+          scrollWidth: this.scrollWidth,
+          scrollHeight: this.scrollHeight,
+          scrollContentWidth: this.scrollContentWidth,
+          scrollContentHeight: this.scrollContentHeight
+        }, e);
+        if (this._events["scroll-hit"]) {
+          this.onScrollHit(scrollTop, scrollLeft);
+        }
         this.ticking = true;
@@ -195,0 +199,0 @@ }

dist/vue-agile-scrollbar.umd.js

@@ -1,1 +0,1 @@
-(function(h,a){typeof exports=="object"&&typeof module!="undefined"?module.exports=a():typeof define=="function"&&define.amd?define(a):(h=typeof globalThis!="undefined"?globalThis:h||self,h["vue-agile-scrollbar"]=a())})(this,function(){"use strict";var h={minBarSize:{type:Number,default:50},scrollTop:{type:[Number,Function],default:0},scrollLeft:{type:[Number,Function],default:0},offsetLeft:{type:Number,default:0},offsetRight:{type:Number,default:10},offsetTop:{type:Number,default:0},offsetBottom:{type:Number,default:10},offsetHit:{type:Number,default:10},isAutoUpdate:{type:Boolean,default:!0},dragSpeedX:{type:Number,default:1},dragSpeedY:{type:Number,default:1}},a=function(){var t=this,l=t.$createElement,s=t._self._c||l;return s("div",{staticClass:"vue-agile-scrollbar",class:{"not-user-select":t.scrollBarX.clientX||t.scrollBarY.clientY}},[s("div",{ref:"scroll",staticClass:"agile-scroll-content",on:{scroll:t.onScroll}},[s("div",{ref:"scrollContent",staticClass:"agile-scroll-wrapper"},[t._t("default")],2)]),s("div",{staticClass:"agile-scroll-bar-x",class:{act:t.scrollBarX.clientX||t.scrollBarY.clientY},style:{left:t.scrollBarX.left+"px",width:t.scrollBarX.width+"px"},on:{mousedown:function(i){return t.scrollBarDown(i,"scrollBarX")}}}),s("div",{staticClass:"agile-scroll-bar-y",class:{act:t.scrollBarY.clientY||t.scrollBarX.clientX},style:{top:t.scrollBarY.top+"px",height:t.scrollBarY.height+"px"},on:{mousedown:function(i){return t.scrollBarDown(i,"scrollBarY")}}})])},B=[],w="";function m(t,l,s,i,r,c,d,C){var e=typeof t=="function"?t.options:t;l&&(e.render=l,e.staticRenderFns=s,e._compiled=!0),i&&(e.functional=!0),c&&(e._scopeId="data-v-"+c);var n;if(d?(n=function(o){o=o||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!o&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(o=__VUE_SSR_CONTEXT__),r&&r.call(this,o),o&&o._registeredComponents&&o._registeredComponents.add(d)},e._ssrRegister=n):r&&(n=C?function(){r.call(this,(e.functional?this.parent:this).$root.$options.shadowRoot)}:r),n)if(e.functional){e._injectStyles=n;var Y=e.render;e.render=function(b,p){return n.call(p),Y(b,p)}}else{var u=e.beforeCreate;e.beforeCreate=u?[].concat(u,n):[n]}return{exports:t,options:e}}const g={props:h,data(){return{scrollBarY:{clientY:null,height:0,top:this.offsetTop,multiple:1},scrollBarX:{clientX:null,width:0,left:this.offsetLeft,multiple:1},scrollWidth:0,scrollHeight:0,scrollContentWidth:0,scrollContentHeight:0}},mounted(){this.$scroll=this.$refs.scroll,this.$scrollContent=this.$refs.scrollContent,this.initContainer(),this.initScrollBar(),this.isAutoUpdate&&(this.observer=new MutationObserver(this.updated),this.observer.observe(this.$refs.scrollContent,{attributes:!0,childList:!0,subtree:!0})),this.addDragEvent()},methods:{initContainer(){this.scrollWidth=this.$scroll.offsetWidth,this.scrollHeight=this.$scroll.offsetHeight,this.scrollContentWidth=this.$scrollContent.offsetWidth,this.scrollContentHeight=this.$scrollContent.offsetHeight},initScrollBar(){if(this.scrollContentWidth>this.scrollWidth){const t=this.scrollWidth-(this.scrollContentWidth-this.scrollWidth);this.scrollBarX.width=t<this.minBarSize?this.minBarSize:t,this.scrollBarX.multiple=(this.scrollContentWidth-this.scrollWidth)/(this.scrollWidth-this.scrollBarX.width-this.offsetLeft-this.offsetRight)}if(this.scrollContentHeight>this.scrollHeight){const t=this.scrollHeight-(this.scrollContentHeight-this.scrollHeight);this.scrollBarY.height=t<this.minBarSize?this.minBarSize:t,this.scrollBarY.multiple=(this.scrollContentHeight-this.scrollHeight)/(this.scrollHeight-this.scrollBarY.height-this.offsetTop-this.offsetBottom)}},updated(){this.initContainer(),this.initScrollBar()},onScroll(t){this.ticking||(window.requestAnimationFrame(()=>{const l=this.$scroll.scrollTop,s=this.$scroll.scrollLeft,i=this.offsetTop+Math.floor(l/this.scrollBarY.multiple);i!==this.scrollBarY.top&&(this.scrollBarY.top=i);const r=this.offsetLeft+Math.floor(s/this.scrollBarX.multiple);r!==this.scrollBarX.left&&(this.scrollBarX.left=r),this.$emit("scroll",{top:l,left:s},t),this._events["scroll-hit"]&&this.onScrollHit(l,s),this.ticking=!1}),this.ticking=!0)},onScrollHit(t,l){let s="top",i=t-this.initTop,r=l-this.initLeft;this.initTop=t,this.initLeft=l;const c=()=>{this.$emit("scroll-hit",s,{top:t,left:l})};i!==0&&this.scrollBarY.height&&(i<0?s="top":s="bottom",this.scrollContentHeight-this.scrollHeight-t==0&&c(),t===0&&s==="top"&&c()),r!==0&&this.scrollBarX.width&&(r<0?s="left":s="right",l===0&&s==="left"&&c(),this.scrollContentWidth-this.scrollWidth-l==0&&c())},scrollBarDown(t,l){l==="scrollBarX"&&(this.scrollBarX.clientX=t.clientX,this.scrollBarX.scrollLeft=this.$scroll.scrollLeft),l==="scrollBarY"&&(this.scrollBarY.clientY=t.clientY,this.scrollBarY.scrollTop=this.$scroll.scrollTop),window.addEventListener("mousemove",this.scrollBarDrag)},scrollBarDrag(t){const l=this.scrollBarX.clientX,s=this.scrollBarY.clientY;if(l){let i=t.clientX-l;this.$scroll.scrollLeft=this.scrollBarX.scrollLeft+i*(this.scrollBarX.multiple*this.dragSpeedX)}if(s){let i=t.clientY-s;this.$scroll.scrollTop=this.scrollBarY.scrollTop+i*this.scrollBarY.multiple*this.dragSpeedY}},scrollBarUp(){this.scrollBarX.clientX=null,this.scrollBarY.clientY=null,window.removeEventListener("mousemove",this.scrollBarDrag)},addDragEvent(){window.addEventListener("mouseup",this.scrollBarUp)},removeDragEvent(){window.removeEventListener("mouseup",this.scrollBarUp)}},beforeDestroy(){this.isAutoUpdate&&this.observer&&this.observer.disconnect(),this.removeDragEvent()}},f={};var v=m(g,a,B,!1,_,null,null,null);function _(t){for(let l in f)this[l]=f[l]}var X=function(){return v.exports}();return X});
+(function(h,a){typeof exports=="object"&&typeof module!="undefined"?module.exports=a():typeof define=="function"&&define.amd?define(a):(h=typeof globalThis!="undefined"?globalThis:h||self,h["vue-agile-scrollbar"]=a())})(this,function(){"use strict";var h={minBarSize:{type:Number,default:50},scrollTop:{type:[Number,Function],default:0},scrollLeft:{type:[Number,Function],default:0},offsetLeft:{type:Number,default:0},offsetRight:{type:Number,default:10},offsetTop:{type:Number,default:0},offsetBottom:{type:Number,default:10},offsetHit:{type:Number,default:10},isAutoUpdate:{type:Boolean,default:!0},dragSpeedX:{type:Number,default:1},dragSpeedY:{type:Number,default:1}},a=function(){var t=this,l=t.$createElement,s=t._self._c||l;return s("div",{staticClass:"vue-agile-scrollbar",class:{"not-user-select":t.scrollBarX.clientX||t.scrollBarY.clientY}},[s("div",{ref:"scroll",staticClass:"agile-scroll-content",on:{scroll:t.onScroll}},[s("div",{ref:"scrollContent",staticClass:"agile-scroll-wrapper"},[t._t("default")],2)]),s("div",{staticClass:"agile-scroll-bar-x",class:{act:t.scrollBarX.clientX||t.scrollBarY.clientY},style:{left:t.scrollBarX.left+"px",width:t.scrollBarX.width+"px"},on:{mousedown:function(i){return t.scrollBarDown(i,"scrollBarX")}}}),s("div",{staticClass:"agile-scroll-bar-y",class:{act:t.scrollBarY.clientY||t.scrollBarX.clientX},style:{top:t.scrollBarY.top+"px",height:t.scrollBarY.height+"px"},on:{mousedown:function(i){return t.scrollBarDown(i,"scrollBarY")}}})])},B=[],w="";function g(t,l,s,i,r,c,d,X){var e=typeof t=="function"?t.options:t;l&&(e.render=l,e.staticRenderFns=s,e._compiled=!0),i&&(e.functional=!0),c&&(e._scopeId="data-v-"+c);var n;if(d?(n=function(o){o=o||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!o&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(o=__VUE_SSR_CONTEXT__),r&&r.call(this,o),o&&o._registeredComponents&&o._registeredComponents.add(d)},e._ssrRegister=n):r&&(n=X?function(){r.call(this,(e.functional?this.parent:this).$root.$options.shadowRoot)}:r),n)if(e.functional){e._injectStyles=n;var Y=e.render;e.render=function(b,p){return n.call(p),Y(b,p)}}else{var u=e.beforeCreate;e.beforeCreate=u?[].concat(u,n):[n]}return{exports:t,options:e}}const m={props:h,data(){return{scrollBarY:{clientY:null,height:0,top:this.offsetTop,multiple:1},scrollBarX:{clientX:null,width:0,left:this.offsetLeft,multiple:1},scrollWidth:0,scrollHeight:0,scrollContentWidth:0,scrollContentHeight:0}},mounted(){this.$scroll=this.$refs.scroll,this.$scrollContent=this.$refs.scrollContent,this.initContainer(),this.initScrollBar(),this.isAutoUpdate&&(this.observer=new MutationObserver(this.updated),this.observer.observe(this.$refs.scrollContent,{attributes:!0,childList:!0,subtree:!0})),this.addDragEvent()},methods:{initContainer(){this.scrollWidth=this.$scroll.offsetWidth,this.scrollHeight=this.$scroll.offsetHeight,this.scrollContentWidth=this.$scrollContent.offsetWidth,this.scrollContentHeight=this.$scrollContent.offsetHeight},initScrollBar(){if(this.scrollContentWidth>this.scrollWidth){const t=this.scrollWidth-(this.scrollContentWidth-this.scrollWidth);this.scrollBarX.width=t<this.minBarSize?this.minBarSize:t,this.scrollBarX.multiple=(this.scrollContentWidth-this.scrollWidth)/(this.scrollWidth-this.scrollBarX.width-this.offsetLeft-this.offsetRight)}if(this.scrollContentHeight>this.scrollHeight){const t=this.scrollHeight-(this.scrollContentHeight-this.scrollHeight);this.scrollBarY.height=t<this.minBarSize?this.minBarSize:t,this.scrollBarY.multiple=(this.scrollContentHeight-this.scrollHeight)/(this.scrollHeight-this.scrollBarY.height-this.offsetTop-this.offsetBottom)}},updated(){this.initContainer(),this.initScrollBar()},onScroll(t){if(!this.ticking){const l=this.$scroll.scrollTop,s=this.$scroll.scrollLeft;window.requestAnimationFrame(()=>{const i=this.offsetTop+Math.floor(l/this.scrollBarY.multiple);i!==this.scrollBarY.top&&(this.scrollBarY.top=i);const r=this.offsetLeft+Math.floor(s/this.scrollBarX.multiple);r!==this.scrollBarX.left&&(this.scrollBarX.left=r),this.ticking=!1}),this.$emit("scroll",{top:l,left:s,scrollWidth:this.scrollWidth,scrollHeight:this.scrollHeight,scrollContentWidth:this.scrollContentWidth,scrollContentHeight:this.scrollContentHeight},t),this._events["scroll-hit"]&&this.onScrollHit(l,s),this.ticking=!0}},onScrollHit(t,l){let s="top",i=t-this.initTop,r=l-this.initLeft;this.initTop=t,this.initLeft=l;const c=()=>{this.$emit("scroll-hit",s,{top:t,left:l})};i!==0&&this.scrollBarY.height&&(i<0?s="top":s="bottom",this.scrollContentHeight-this.scrollHeight-t==0&&c(),t===0&&s==="top"&&c()),r!==0&&this.scrollBarX.width&&(r<0?s="left":s="right",l===0&&s==="left"&&c(),this.scrollContentWidth-this.scrollWidth-l==0&&c())},scrollBarDown(t,l){l==="scrollBarX"&&(this.scrollBarX.clientX=t.clientX,this.scrollBarX.scrollLeft=this.$scroll.scrollLeft),l==="scrollBarY"&&(this.scrollBarY.clientY=t.clientY,this.scrollBarY.scrollTop=this.$scroll.scrollTop),window.addEventListener("mousemove",this.scrollBarDrag)},scrollBarDrag(t){const l=this.scrollBarX.clientX,s=this.scrollBarY.clientY;if(l){let i=t.clientX-l;this.$scroll.scrollLeft=this.scrollBarX.scrollLeft+i*(this.scrollBarX.multiple*this.dragSpeedX)}if(s){let i=t.clientY-s;this.$scroll.scrollTop=this.scrollBarY.scrollTop+i*this.scrollBarY.multiple*this.dragSpeedY}},scrollBarUp(){this.scrollBarX.clientX=null,this.scrollBarY.clientY=null,window.removeEventListener("mousemove",this.scrollBarDrag)},addDragEvent(){window.addEventListener("mouseup",this.scrollBarUp)},removeDragEvent(){window.removeEventListener("mouseup",this.scrollBarUp)}},beforeDestroy(){this.isAutoUpdate&&this.observer&&this.observer.disconnect(),this.removeDragEvent()}},f={};var v=g(m,a,B,!1,_,null,null,null);function _(t){for(let l in f)this[l]=f[l]}var C=function(){return v.exports}();return C});

package.json

 {
   "name": "vue-agile-scrollbar",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Custom agile scroll bar",
@@ -5,0 +5,0 @@ "author": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

18543

increased by1.84%

Lines of code

309

increased by1.31%

No dependency changes