From 6cf462e38055a13990e6e55f57a4f9f81ba28fd6 Mon Sep 17 00:00:00 2001 From: Daniel Chmielowiec Date: Fri, 16 Oct 2015 13:45:48 +0200 Subject: [PATCH] 1) Added custom classes to scorllbar, and thmb elements. 2) Added cstomized offset to scrollbar --- README.md | 2 ++ dist/ng-tiny-scrollbar.css | 3 --- dist/ng-tiny-scrollbar.js | 42 +++++++++++++++++++++++++++++++--- dist/ng-tiny-scrollbar.min.css | 2 +- dist/ng-tiny-scrollbar.min.js | 2 +- src/ng-tiny-scrollbar.js | 42 +++++++++++++++++++++++++++++++--- src/ng-tiny-scrollbar.less | 3 --- 7 files changed, 82 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 8b0bbb1..95218fc 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,8 @@ Here's the list of all the options and the default values thumbSize : false, // Set the size of the thumb to auto or a fixed number. alwaysVisible: true, // Set to false to hide the scrollbar if not being used autoUpdate: false // Autoupdate the scrollbar if DOM changes. Needs MutationObserver or a polyfill to be available + thumbClass: [] // Custom classes to apply on 'scroll-thumb' element (Might be also a string) + scrollbarClass: [] // Custom classes to apply on 'scrollbar' element (Might be also a string) } ``` diff --git a/dist/ng-tiny-scrollbar.css b/dist/ng-tiny-scrollbar.css index 8a4f1b2..674a96f 100644 --- a/dist/ng-tiny-scrollbar.css +++ b/dist/ng-tiny-scrollbar.css @@ -13,11 +13,8 @@ background-color: #d3d3d3; border-radius: 5px; position: absolute; - top: 0; - right: 0; width: 15px; transition: 0.6s ease-in-out opacity; - height: 100%; } .scroll-bar.disable { display: none; diff --git a/dist/ng-tiny-scrollbar.js b/dist/ng-tiny-scrollbar.js index 0f04984..286f42a 100644 --- a/dist/ng-tiny-scrollbar.js +++ b/dist/ng-tiny-scrollbar.js @@ -36,7 +36,12 @@ angular.module('ngTinyScrollbar', []) trackSize: false, // Set the size of the scrollbar to auto or a fixed number. thumbSize: false, // Set the size of the thumb to auto or a fixed number. alwaysVisible: true, // Set to false to hide the scrollbar if not being used - autoUpdate: false // Autoupdate the scrollbar if DOM changes. Needs MutationObserver or a polyfill to be available + autoUpdate: false, // Autoupdate the scrollbar if DOM changes. Needs MutationObserver or a polyfill to be available + thumbClass: [], // custom classes to be added to thumb + scrollbarClass: [], // custom classes to be added to scroll-bar + scrollBarOffsetTop: 0, //additional offset to position scrollbar + scrollBarOffsetBottom: 0, //additional offset to position scrollbar + scrollBarOffsetRight: 0, //additional offset to position scrollbar }; this.$get = function () { @@ -92,18 +97,47 @@ angular.module('ngTinyScrollbar', []) if (!this.options.alwaysVisible) { $scrollbar.css('opacity', 0); } + + self.applyClasses(); self.update(); setEvents(); return self; }; + this.applyClasses = function(){ + + // classes for scroll-bar + if (typeof this.options.scrollbarClass === 'string'){ + $scrollbar.addClass(this.options.scrollbarClass); + } else if (typeof this.options.scrollbarClass === 'object'){ + var x; + for (x in this.options.scrollbarClass){ + $scrollbar.addClass(this.options.scrollbarClass[x]) + } + } + + // classes for thumb + if (typeof this.options.thumbClass === 'string'){ + $thumb.addClass(this.options.thumbClass); + } else if (typeof this.options.thumbClass === 'object'){ + var x; + for (x in this.options.thumbClass){ + $thumb.addClass(this.options.thumbClass[x]) + } + } + + }; + this.update = function(scrollTo) { this.viewportSize = $viewport.prop('offset'+ sizeLabelCap); this.contentSize = $overview.prop('scroll'+ sizeLabelCap); this.contentRatio = this.viewportSize / this.contentSize; - this.trackSize = this.options.trackSize || this.viewportSize; + this.trackSize = (this.options.trackSize || this.viewportSize) - this.options.scrollBarOffsetTop - this.options.scrollBarOffsetBottom; this.thumbSize = Math.min(this.trackSize, Math.max(0, (this.options.thumbSize || (this.trackSize * this.contentRatio)))); this.trackRatio = this.options.thumbSize ? (this.contentSize - this.viewportSize) / (this.trackSize - this.thumbSize) : (this.contentSize / this.trackSize); + this.scrollBarOffsetTop = this.options.scrollBarOffsetTop; + this.scrollBarOffsetBottom = this.options.scrollBarOffsetBottom; + this.scrollBarOffsetRight = this.options.scrollBarOffsetRight; mousePosition = $scrollbar.prop('offsetTop'); $scrollbar.toggleClass('disable', this.contentRatio >= 1 || isNaN(this.contentRatio)); @@ -128,7 +162,9 @@ angular.module('ngTinyScrollbar', []) ensureContentPosition(); $thumb.css(posiLabel, self.contentPosition / self.trackRatio + 'px'); - $scrollbar.css(sizeLabel, self.trackSize + 'px'); + $scrollbar.css('top', self.scrollBarOffsetTop + 'px'); + $scrollbar.css('bottom', self.scrollBarOffsetBottom + 'px'); + $scrollbar.css('right', self.scrollBarOffsetRight + 'px'); $thumb.css(sizeLabel, self.thumbSize + 'px'); $overview.css(posiLabel, -self.contentPosition + 'px'); diff --git a/dist/ng-tiny-scrollbar.min.css b/dist/ng-tiny-scrollbar.min.css index 4452a41..b720f19 100644 --- a/dist/ng-tiny-scrollbar.min.css +++ b/dist/ng-tiny-scrollbar.min.css @@ -1 +1 @@ -.scroll-viewport{overflow:hidden;position:relative}.scroll-overview{position:absolute;left:0;top:0;padding:0;margin:0}.scroll-bar{background-color:#d3d3d3;border-radius:5px;position:absolute;top:0;right:0;width:15px;transition:.6s ease-in-out opacity;height:100%}.scroll-bar.disable{display:none}.scroll-bar.visible,.scroll-bar:hover{opacity:1!important}.scroll-thumb{background-color:gray;border-radius:5px;height:20px;width:13px;cursor:pointer;overflow:hidden;position:absolute;top:0;left:1px}body.scroll-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} \ No newline at end of file +.scroll-bar,.scroll-thumb{border-radius:5px;position:absolute}.scroll-viewport{overflow:hidden;position:relative}.scroll-overview{position:absolute;left:0;top:0;padding:0;margin:0}.scroll-bar{background-color:#d3d3d3;width:15px;transition:.6s ease-in-out opacity}.scroll-bar.disable{display:none}.scroll-bar.visible,.scroll-bar:hover{opacity:1!important}.scroll-thumb{background-color:grey;height:20px;width:13px;cursor:pointer;overflow:hidden;top:0;left:1px}body.scroll-no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} \ No newline at end of file diff --git a/dist/ng-tiny-scrollbar.min.js b/dist/ng-tiny-scrollbar.min.js index 52ffb96..e527da5 100644 --- a/dist/ng-tiny-scrollbar.min.js +++ b/dist/ng-tiny-scrollbar.min.js @@ -21,4 +21,4 @@ OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -"use strict";angular.module("ngTinyScrollbar",[]).provider("scrollbar",function(){this.defaults={axis:"y",wheel:!0,wheelSpeed:40,wheelLock:!0,scrollInvert:!1,trackSize:!1,thumbSize:!1,alwaysVisible:!0,autoUpdate:!1},this.$get=function(){return this}}).directive("scrollbar",["$window","$timeout","$parse","$animate","scrollbar",function(t,e,o,i,n){return{restrict:"A",transclude:!0,template:'
',controller:["$scope","$element","$attrs",function(s,a,l){function c(){b.contentRatio<=1&&b.contentPosition>b.contentSize-b.viewportSize?b.contentPosition=b.contentSize-b.viewportSize:b.contentRatio>1&&b.contentPosition>0&&(b.contentPosition=0)}function r(){M&&P.on("touchstart",h),x.on("mousedown",p),k.on("mousedown",d),angular.element(t).on("resize",u),b.options.wheel&&a.on($,v),b.options.autoUpdate&&MutationObserver&&!function(){var t,o=y[0].offsetWidth,i=y[0].offsetHeight,n=new MutationObserver(function(){(o!==y[0].offsetWidth||i!==y[0].offsetHeight)&&(e.cancel(t),t=e(function(){o=y[0].offsetWidth,i=y[0].offsetHeight,b.update()}))});n.observe(a[0],{childList:!0,subtree:!0,characterData:!0,attributes:!0})}()}function u(){b.update()}function h(e){var o=e&&e.originalEvent||e||t.event;1===o.touches.length&&(e.stopPropagation(),p(o.touches[0]))}function p(t){z.addClass("scroll-no-select"),a.addClass("scroll-no-select"),b.options.alwaysVisible||k.addClass("visible"),C=R?t.pageX:t.pageY,b.thumbPosition=parseInt(x.css(X),10)||0,M&&(g.on("touchmove",f),g.on("touchend",m)),g.on("mousemove",d),g.on("mouseup",m),x.on("mouseup",m)}function v(o){if(!(b.contentRatio>=1)){b.options.alwaysVisible||(w&&e.cancel(w),k.addClass("visible"),w=e(function(){k.removeClass("visible")},100));var i=o&&o.originalEvent||o||t.event,n=b.options.axis.toUpperCase(),s={X:i.deltaX,Y:i.deltaY},l=0==i.deltaMode?b.options.wheelSpeed:1;b.options.scrollInvert&&(l*=-1),"mousewheel"===$&&(s.Y=-1*i.wheelDelta/40,i.wheelDeltaX&&(s.X=-1*i.wheelDeltaX/40)),s.X*=-1/l,s.Y*=-1/l;var r=s[n];b.contentPosition-=r*b.options.wheelSpeed,b.contentPosition=Math.min(b.contentSize-b.viewportSize,Math.max(0,b.contentPosition)),a[0].dispatchEvent(A),c(),x.css(X,b.contentPosition/b.trackRatio+"px"),y.css(X,-b.contentPosition+"px"),(b.options.wheelLock||b.contentPosition!==b.contentSize-b.viewportSize&&0!==b.contentPosition)&&i.preventDefault()}}function f(e){var o=e&&e.originalEvent||e||t.event;1===o.touches.length&&(e.preventDefault(),d(o.touches[0]))}function d(t){if(!(b.contentRatio>=1)){var e=R?t.pageX:t.pageY,o=e-C;(b.options.scrollInvert&&"mousemove"===t.type||"mousemove"!==t.type&&!b.options.scrollInvert)&&(o=C-e);var i=Math.min(b.trackSize-b.thumbSize,Math.max(0,b.thumbPosition+o));b.contentPosition=i*b.trackRatio,a[0].dispatchEvent(A),c(),x.css(X,i+"px"),y.css(X,-b.contentPosition+"px")}}function m(){z.removeClass("scroll-no-select"),a.removeClass("scroll-no-select"),b.options.alwaysVisible||k.removeClass("visible"),g.off("mousemove",d),g.off("mouseup",m),x.off("mouseup",m),g.off("touchmove",f),g.off("ontouchend",m)}var S=l.scrollbar;S=S?o(S)(s):{},this.options=angular.extend({},n.defaults,S),this._defaults=n.defaults;var w,b=this,z=angular.element(document.querySelectorAll("body")[0]),g=angular.element(document),P=angular.element(a[0].querySelectorAll(".scroll-viewport")[0]),y=angular.element(a[0].querySelectorAll(".scroll-overview")[0]),k=angular.element(a[0].querySelectorAll(".scroll-bar")[0]),x=angular.element(a[0].querySelectorAll(".scroll-thumb")[0]),C=0,R="x"===this.options.axis,M="ontouchstart"in t,$="onwheel"in document?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll",E=R?"width":"height",V=E.charAt(0).toUpperCase()+E.slice(1).toLowerCase(),X=R?"left":"top",A=document.createEvent("HTMLEvents");A.initEvent("move",!0,!0),this.contentPosition=0,this.viewportSize=0,this.contentSize=0,this.contentRatio=0,this.trackSize=0,this.trackRatio=0,this.thumbSize=0,this.thumbPosition=0,this.initialize=function(){return this.options.alwaysVisible||k.css("opacity",0),b.update(),r(),b},this.update=function(t){if(this.viewportSize=P.prop("offset"+V),this.contentSize=y.prop("scroll"+V),this.contentRatio=this.viewportSize/this.contentSize,this.trackSize=this.options.trackSize||this.viewportSize,this.thumbSize=Math.min(this.trackSize,Math.max(0,this.options.thumbSize||this.trackSize*this.contentRatio)),this.trackRatio=this.options.thumbSize?(this.contentSize-this.viewportSize)/(this.trackSize-this.thumbSize):this.contentSize/this.trackSize,C=k.prop("offsetTop"),k.toggleClass("disable",this.contentRatio>=1||isNaN(this.contentRatio)),!this.options.alwaysVisible&&this.contentRatio<1&&this.viewportSize>0&&i.addClass(k,"visible").then(function(){i.removeClass(k,"visible"),s.$digest()}),null!=t)switch(t){case"bottom":this.contentPosition=this.contentSize-this.viewportSize;break;default:this.contentPosition=parseInt(t,10)||0}return c(),x.css(X,b.contentPosition/b.trackRatio+"px"),k.css(E,b.trackSize+"px"),x.css(E,b.thumbSize+"px"),y.css(X,-b.contentPosition+"px"),this},this.cleanup=function(){P.off("touchstart",h),x.off("mousedown",p),k.off("mousedown",d),angular.element(t).off("resize",u),a.off($,v),b.options.alwaysVisible=!0,m()}}],link:function(e,o,i,n){var s=t.getComputedStyle(o[0]).getPropertyValue("position");"relative"!==s&&"absolute"!==s&&o.css("position","relative"),n.initialize(),o.on("$destroy",function(){n.cleanup()})}}}]); \ No newline at end of file +"use strict";angular.module("ngTinyScrollbar",[]).provider("scrollbar",function(){this.defaults={axis:"y",wheel:!0,wheelSpeed:40,wheelLock:!0,scrollInvert:!1,trackSize:!1,thumbSize:!1,alwaysVisible:!0,autoUpdate:!1,thumbClass:[],scrollbarClass:[],scrollBarOffsetTop:0,scrollBarOffsetBottom:0,scrollBarOffsetRight:0},this.$get=function(){return this}}).directive("scrollbar",["$window","$timeout","$parse","$animate","scrollbar",function(t,o,e,s,i){return{restrict:"A",transclude:!0,template:'
',controller:["$scope","$element","$attrs",function(n,l,a){function r(){w.contentRatio<=1&&w.contentPosition>w.contentSize-w.viewportSize?w.contentPosition=w.contentSize-w.viewportSize:w.contentRatio>1&&w.contentPosition>0&&(w.contentPosition=0)}function c(){x&&C.on("touchstart",u),B.on("mousedown",p),P.on("mousedown",m),angular.element(t).on("resize",h),w.options.wheel&&l.on(O,f),w.options.autoUpdate&&MutationObserver&&!function(){var t,e=y[0].offsetWidth,s=y[0].offsetHeight,i=new MutationObserver(function(){(e!==y[0].offsetWidth||s!==y[0].offsetHeight)&&(o.cancel(t),t=o(function(){e=y[0].offsetWidth,s=y[0].offsetHeight,w.update()}))});i.observe(l[0],{childList:!0,subtree:!0,characterData:!0,attributes:!0})}()}function h(){w.update()}function u(o){var e=o&&o.originalEvent||o||t.event;1===e.touches.length&&(o.stopPropagation(),p(e.touches[0]))}function p(t){z.addClass("scroll-no-select"),l.addClass("scroll-no-select"),w.options.alwaysVisible||P.addClass("visible"),R=k?t.pageX:t.pageY,w.thumbPosition=parseInt(B.css(E),10)||0,x&&(g.on("touchmove",v),g.on("touchend",d)),g.on("mousemove",m),g.on("mouseup",d),B.on("mouseup",d)}function f(e){if(!(w.contentRatio>=1)){w.options.alwaysVisible||(S&&o.cancel(S),P.addClass("visible"),S=o(function(){P.removeClass("visible")},100));var s=e&&e.originalEvent||e||t.event,i=w.options.axis.toUpperCase(),n={X:s.deltaX,Y:s.deltaY},a=0==s.deltaMode?w.options.wheelSpeed:1;w.options.scrollInvert&&(a*=-1),"mousewheel"===O&&(n.Y=-1*s.wheelDelta/40,s.wheelDeltaX&&(n.X=-1*s.wheelDeltaX/40)),n.X*=-1/a,n.Y*=-1/a;var c=n[i];w.contentPosition-=c*w.options.wheelSpeed,w.contentPosition=Math.min(w.contentSize-w.viewportSize,Math.max(0,w.contentPosition)),l[0].dispatchEvent(T),r(),B.css(E,w.contentPosition/w.trackRatio+"px"),y.css(E,-w.contentPosition+"px"),(w.options.wheelLock||w.contentPosition!==w.contentSize-w.viewportSize&&0!==w.contentPosition)&&s.preventDefault()}}function v(o){var e=o&&o.originalEvent||o||t.event;1===e.touches.length&&(o.preventDefault(),m(e.touches[0]))}function m(t){if(!(w.contentRatio>=1)){var o=k?t.pageX:t.pageY,e=o-R;(w.options.scrollInvert&&"mousemove"===t.type||"mousemove"!==t.type&&!w.options.scrollInvert)&&(e=R-o);var s=Math.min(w.trackSize-w.thumbSize,Math.max(0,w.thumbPosition+e));w.contentPosition=s*w.trackRatio,l[0].dispatchEvent(T),r(),B.css(E,s+"px"),y.css(E,-w.contentPosition+"px")}}function d(){z.removeClass("scroll-no-select"),l.removeClass("scroll-no-select"),w.options.alwaysVisible||P.removeClass("visible"),g.off("mousemove",m),g.off("mouseup",d),B.off("mouseup",d),g.off("touchmove",v),g.off("ontouchend",d)}var b=a.scrollbar;b=b?e(b)(n):{},this.options=angular.extend({},i.defaults,b),this._defaults=i.defaults;var S,w=this,z=angular.element(document.querySelectorAll("body")[0]),g=angular.element(document),C=angular.element(l[0].querySelectorAll(".scroll-viewport")[0]),y=angular.element(l[0].querySelectorAll(".scroll-overview")[0]),P=angular.element(l[0].querySelectorAll(".scroll-bar")[0]),B=angular.element(l[0].querySelectorAll(".scroll-thumb")[0]),R=0,k="x"===this.options.axis,x="ontouchstart"in t,O="onwheel"in document?"wheel":void 0!==document.onmousewheel?"mousewheel":"DOMMouseScroll",M=k?"width":"height",$=M.charAt(0).toUpperCase()+M.slice(1).toLowerCase(),E=k?"left":"top",T=document.createEvent("HTMLEvents");T.initEvent("move",!0,!0),this.contentPosition=0,this.viewportSize=0,this.contentSize=0,this.contentRatio=0,this.trackSize=0,this.trackRatio=0,this.thumbSize=0,this.thumbPosition=0,this.initialize=function(){return this.options.alwaysVisible||P.css("opacity",0),w.applyClasses(),w.update(),c(),w},this.applyClasses=function(){if("string"==typeof this.options.scrollbarClass)P.addClass(this.options.scrollbarClass);else if("object"==typeof this.options.scrollbarClass){var t;for(t in this.options.scrollbarClass)P.addClass(this.options.scrollbarClass[t])}if("string"==typeof this.options.thumbClass)B.addClass(this.options.thumbClass);else if("object"==typeof this.options.thumbClass){var t;for(t in this.options.thumbClass)B.addClass(this.options.thumbClass[t])}},this.update=function(t){if(this.viewportSize=C.prop("offset"+$),this.contentSize=y.prop("scroll"+$),this.contentRatio=this.viewportSize/this.contentSize,this.trackSize=(this.options.trackSize||this.viewportSize)-this.options.scrollBarOffsetTop-this.options.scrollBarOffsetBottom,this.thumbSize=Math.min(this.trackSize,Math.max(0,this.options.thumbSize||this.trackSize*this.contentRatio)),this.trackRatio=this.options.thumbSize?(this.contentSize-this.viewportSize)/(this.trackSize-this.thumbSize):this.contentSize/this.trackSize,this.scrollBarOffsetTop=this.options.scrollBarOffsetTop,this.scrollBarOffsetBottom=this.options.scrollBarOffsetBottom,this.scrollBarOffsetRight=this.options.scrollBarOffsetRight,R=P.prop("offsetTop"),P.toggleClass("disable",this.contentRatio>=1||isNaN(this.contentRatio)),!this.options.alwaysVisible&&this.contentRatio<1&&this.viewportSize>0&&s.addClass(P,"visible").then(function(){s.removeClass(P,"visible"),n.$digest()}),null!=t)switch(t){case"bottom":this.contentPosition=this.contentSize-this.viewportSize;break;default:this.contentPosition=parseInt(t,10)||0}return r(),B.css(E,w.contentPosition/w.trackRatio+"px"),P.css("top",w.scrollBarOffsetTop+"px"),P.css("bottom",w.scrollBarOffsetBottom+"px"),P.css("right",w.scrollBarOffsetRight+"px"),B.css(M,w.thumbSize+"px"),y.css(E,-w.contentPosition+"px"),this},this.cleanup=function(){C.off("touchstart",u),B.off("mousedown",p),P.off("mousedown",m),angular.element(t).off("resize",h),l.off(O,f),w.options.alwaysVisible=!0,d()}}],link:function(o,e,s,i){var n=t.getComputedStyle(e[0]).getPropertyValue("position");"relative"!==n&&"absolute"!==n&&e.css("position","relative"),i.initialize(),e.on("$destroy",function(){i.cleanup()})}}}]); \ No newline at end of file diff --git a/src/ng-tiny-scrollbar.js b/src/ng-tiny-scrollbar.js index 0f04984..286f42a 100644 --- a/src/ng-tiny-scrollbar.js +++ b/src/ng-tiny-scrollbar.js @@ -36,7 +36,12 @@ angular.module('ngTinyScrollbar', []) trackSize: false, // Set the size of the scrollbar to auto or a fixed number. thumbSize: false, // Set the size of the thumb to auto or a fixed number. alwaysVisible: true, // Set to false to hide the scrollbar if not being used - autoUpdate: false // Autoupdate the scrollbar if DOM changes. Needs MutationObserver or a polyfill to be available + autoUpdate: false, // Autoupdate the scrollbar if DOM changes. Needs MutationObserver or a polyfill to be available + thumbClass: [], // custom classes to be added to thumb + scrollbarClass: [], // custom classes to be added to scroll-bar + scrollBarOffsetTop: 0, //additional offset to position scrollbar + scrollBarOffsetBottom: 0, //additional offset to position scrollbar + scrollBarOffsetRight: 0, //additional offset to position scrollbar }; this.$get = function () { @@ -92,18 +97,47 @@ angular.module('ngTinyScrollbar', []) if (!this.options.alwaysVisible) { $scrollbar.css('opacity', 0); } + + self.applyClasses(); self.update(); setEvents(); return self; }; + this.applyClasses = function(){ + + // classes for scroll-bar + if (typeof this.options.scrollbarClass === 'string'){ + $scrollbar.addClass(this.options.scrollbarClass); + } else if (typeof this.options.scrollbarClass === 'object'){ + var x; + for (x in this.options.scrollbarClass){ + $scrollbar.addClass(this.options.scrollbarClass[x]) + } + } + + // classes for thumb + if (typeof this.options.thumbClass === 'string'){ + $thumb.addClass(this.options.thumbClass); + } else if (typeof this.options.thumbClass === 'object'){ + var x; + for (x in this.options.thumbClass){ + $thumb.addClass(this.options.thumbClass[x]) + } + } + + }; + this.update = function(scrollTo) { this.viewportSize = $viewport.prop('offset'+ sizeLabelCap); this.contentSize = $overview.prop('scroll'+ sizeLabelCap); this.contentRatio = this.viewportSize / this.contentSize; - this.trackSize = this.options.trackSize || this.viewportSize; + this.trackSize = (this.options.trackSize || this.viewportSize) - this.options.scrollBarOffsetTop - this.options.scrollBarOffsetBottom; this.thumbSize = Math.min(this.trackSize, Math.max(0, (this.options.thumbSize || (this.trackSize * this.contentRatio)))); this.trackRatio = this.options.thumbSize ? (this.contentSize - this.viewportSize) / (this.trackSize - this.thumbSize) : (this.contentSize / this.trackSize); + this.scrollBarOffsetTop = this.options.scrollBarOffsetTop; + this.scrollBarOffsetBottom = this.options.scrollBarOffsetBottom; + this.scrollBarOffsetRight = this.options.scrollBarOffsetRight; mousePosition = $scrollbar.prop('offsetTop'); $scrollbar.toggleClass('disable', this.contentRatio >= 1 || isNaN(this.contentRatio)); @@ -128,7 +162,9 @@ angular.module('ngTinyScrollbar', []) ensureContentPosition(); $thumb.css(posiLabel, self.contentPosition / self.trackRatio + 'px'); - $scrollbar.css(sizeLabel, self.trackSize + 'px'); + $scrollbar.css('top', self.scrollBarOffsetTop + 'px'); + $scrollbar.css('bottom', self.scrollBarOffsetBottom + 'px'); + $scrollbar.css('right', self.scrollBarOffsetRight + 'px'); $thumb.css(sizeLabel, self.thumbSize + 'px'); $overview.css(posiLabel, -self.contentPosition + 'px'); diff --git a/src/ng-tiny-scrollbar.less b/src/ng-tiny-scrollbar.less index 62675a5..14f4370 100644 --- a/src/ng-tiny-scrollbar.less +++ b/src/ng-tiny-scrollbar.less @@ -18,11 +18,8 @@ background-color: @scrollbar-color; border-radius: @scroll-border-radius; position: absolute; - top: 0; - right: 0; width: @scrollbar-width; transition: 0.6s ease-in-out opacity; - height: 100%; &.disable { display: none; }