From eb13d331d98148e14e7f336823108582a091db71 Mon Sep 17 00:00:00 2001 From: Karol Tomoki Yamazaki Date: Fri, 11 Jul 2014 15:33:40 +0200 Subject: [PATCH] Consider border of scrollbar rails. Fixes #176 https://github.com/noraesae/perfect-scrollbar/issues/176 --- min/perfect-scrollbar.min.js | 5 +---- src/perfect-scrollbar.js | 8 +++++--- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/min/perfect-scrollbar.min.js b/min/perfect-scrollbar.min.js index a340253..6bc72ea 100644 --- a/min/perfect-scrollbar.min.js +++ b/min/perfect-scrollbar.min.js @@ -1,4 +1 @@ -/*! perfect-scrollbar - v0.4.10 -* http://noraesae.github.com/perfect-scrollbar/ -* Copyright (c) 2014 Hyeonje Alex Jun; Licensed MIT */ -(function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):"object"==typeof exports?e(require("jquery")):e(jQuery)})(function(e){"use strict";var t={wheelSpeed:10,wheelPropagation:!1,minScrollbarLength:null,useBothWheelAxes:!1,useKeyboard:!0,suppressScrollX:!1,suppressScrollY:!1,scrollXMarginOffset:0,scrollYMarginOffset:0,includePadding:!1},o=function(){var e=0;return function(){var t=e;return e+=1,".perfect-scrollbar-"+t}}();e.fn.perfectScrollbar=function(n,r){return this.each(function(){var l=e.extend(!0,{},t),s=e(this);if("object"==typeof n?e.extend(!0,l,n):r=n,"update"===r)return s.data("perfect-scrollbar-update")&&s.data("perfect-scrollbar-update")(),s;if("destroy"===r)return s.data("perfect-scrollbar-destroy")&&s.data("perfect-scrollbar-destroy")(),s;if(s.data("perfect-scrollbar"))return s.data("perfect-scrollbar");s.addClass("ps-container");var a,c,i,u,p,d,f,h,v,b,g=e("
").appendTo(s),m=e("
").appendTo(s),w=e("
").appendTo(g),T=e("
").appendTo(m),L=parseInt(g.css("bottom"),10),y=L===L,I=y?null:parseInt(g.css("top"),10),S=parseInt(m.css("right"),10),C=S===S,P=C?null:parseInt(m.css("left"),10),X="rtl"===s.css("direction"),Y=o(),k=function(e,t){var o=e+t,n=u-v;b=0>o?0:o>n?n:o;var r=parseInt(b*(d-u)/(u-v),10);s.scrollTop(r),y?g.css({bottom:L-r}):g.css({top:I+r})},x=function(e,t){var o=e+t,n=i-f;h=0>o?0:o>n?n:o;var r=parseInt(h*(p-i)/(i-f),10);s.scrollLeft(r),C?m.css({right:S-r}):m.css({left:P+r})},D=function(e){return l.minScrollbarLength&&(e=Math.max(e,l.minScrollbarLength)),e},M=function(){var e={width:i,display:a?"inherit":"none"};e.left=X?s.scrollLeft()+i-p:s.scrollLeft(),y?e.bottom=L-s.scrollTop():e.top=I+s.scrollTop(),g.css(e);var t={top:s.scrollTop(),height:u,display:c?"inherit":"none"};C?t.right=X?p-s.scrollLeft()-S-T.outerWidth():S-s.scrollLeft():t.left=X?s.scrollLeft()+2*i-p-P-T.outerWidth():P+s.scrollLeft(),m.css(t),w.css({left:h,width:f}),T.css({top:b,height:v})},W=function(){i=l.includePadding?s.innerWidth():s.width(),u=l.includePadding?s.innerHeight():s.height(),p=s.prop("scrollWidth"),d=s.prop("scrollHeight"),!l.suppressScrollX&&p>i+l.scrollXMarginOffset?(a=!0,f=D(parseInt(i*i/p,10)),h=parseInt(s.scrollLeft()*(i-f)/(p-i),10)):(a=!1,f=0,h=0,s.scrollLeft(0)),!l.suppressScrollY&&d>u+l.scrollYMarginOffset?(c=!0,v=D(parseInt(u*u/d,10)),b=parseInt(s.scrollTop()*(u-v)/(d-u),10)):(c=!1,v=0,b=0,s.scrollTop(0)),b>=u-v&&(b=u-v),h>=i-f&&(h=i-f),M()},j=function(){var t,o;w.bind("mousedown"+Y,function(e){o=e.pageX,t=w.position().left,g.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(document).bind("mousemove"+Y,function(e){g.hasClass("in-scrolling")&&(x(t,e.pageX-o),e.stopPropagation(),e.preventDefault())}),e(document).bind("mouseup"+Y,function(){g.hasClass("in-scrolling")&&g.removeClass("in-scrolling")}),t=o=null},E=function(){var t,o;T.bind("mousedown"+Y,function(e){o=e.pageY,t=T.position().top,m.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(document).bind("mousemove"+Y,function(e){m.hasClass("in-scrolling")&&(k(t,e.pageY-o),e.stopPropagation(),e.preventDefault())}),e(document).bind("mouseup"+Y,function(){m.hasClass("in-scrolling")&&m.removeClass("in-scrolling")}),t=o=null},O=function(e,t){var o=s.scrollTop();if(0===e){if(!c)return!1;if(0===o&&t>0||o>=d-u&&0>t)return!l.wheelPropagation}var n=s.scrollLeft();if(0===t){if(!a)return!1;if(0===n&&0>e||n>=p-i&&e>0)return!l.wheelPropagation}return!0},q=function(){l.wheelSpeed/=10;var e=!1;s.bind("mousewheel"+Y,function(t,o,n,r){var i=t.deltaX*t.deltaFactor||n,u=t.deltaY*t.deltaFactor||r;e=!1,l.useBothWheelAxes?c&&!a?(u?s.scrollTop(s.scrollTop()-u*l.wheelSpeed):s.scrollTop(s.scrollTop()+i*l.wheelSpeed),e=!0):a&&!c&&(i?s.scrollLeft(s.scrollLeft()+i*l.wheelSpeed):s.scrollLeft(s.scrollLeft()-u*l.wheelSpeed),e=!0):(s.scrollTop(s.scrollTop()-u*l.wheelSpeed),s.scrollLeft(s.scrollLeft()+i*l.wheelSpeed)),W(),e=e||O(i,u),e&&(t.stopPropagation(),t.preventDefault())}),s.bind("MozMousePixelScroll"+Y,function(t){e&&t.preventDefault()})},A=function(){var t=!1;s.bind("mouseenter"+Y,function(){t=!0}),s.bind("mouseleave"+Y,function(){t=!1});var o=!1;e(document).bind("keydown"+Y,function(n){if(t&&!e(document.activeElement).is(":input,[contenteditable]")){var r=0,l=0;switch(n.which){case 37:r=-30;break;case 38:l=30;break;case 39:r=30;break;case 40:l=-30;break;case 33:l=90;break;case 32:case 34:l=-90;break;case 35:l=-u;break;case 36:l=u;break;default:return}s.scrollTop(s.scrollTop()-l),s.scrollLeft(s.scrollLeft()+r),o=O(r,l),o&&n.preventDefault()}})},B=function(){var e=function(e){e.stopPropagation()};T.bind("click"+Y,e),m.bind("click"+Y,function(e){var t=parseInt(v/2,10),o=e.pageY-m.offset().top-t,n=u-v,r=o/n;0>r?r=0:r>1&&(r=1),s.scrollTop((d-u)*r)}),w.bind("click"+Y,e),g.bind("click"+Y,function(e){var t=parseInt(f/2,10),o=e.pageX-g.offset().left-t,n=i-f,r=o/n;0>r?r=0:r>1&&(r=1),s.scrollLeft((p-i)*r)})},F=function(){var t=function(e,t){s.scrollTop(s.scrollTop()-t),s.scrollLeft(s.scrollLeft()-e),W()},o={},n=0,r={},l=null,a=!1;e(window).bind("touchstart"+Y,function(){a=!0}),e(window).bind("touchend"+Y,function(){a=!1}),s.bind("touchstart"+Y,function(e){var t=e.originalEvent.targetTouches[0];o.pageX=t.pageX,o.pageY=t.pageY,n=(new Date).getTime(),null!==l&&clearInterval(l),e.stopPropagation()}),s.bind("touchmove"+Y,function(e){if(!a&&1===e.originalEvent.targetTouches.length){var l=e.originalEvent.targetTouches[0],s={};s.pageX=l.pageX,s.pageY=l.pageY;var c=s.pageX-o.pageX,i=s.pageY-o.pageY;t(c,i),o=s;var u=(new Date).getTime(),p=u-n;p>0&&(r.x=c/p,r.y=i/p,n=u),e.preventDefault()}}),s.bind("touchend"+Y,function(){clearInterval(l),l=setInterval(function(){return.01>Math.abs(r.x)&&.01>Math.abs(r.y)?(clearInterval(l),void 0):(t(30*r.x,30*r.y),r.x*=.8,r.y*=.8,void 0)},10)})},H=function(){s.bind("scroll"+Y,function(){W()})},K=function(){s.unbind(Y),e(window).unbind(Y),e(document).unbind(Y),s.data("perfect-scrollbar",null),s.data("perfect-scrollbar-update",null),s.data("perfect-scrollbar-destroy",null),w.remove(),T.remove(),g.remove(),m.remove(),g=m=w=T=a=c=i=u=p=d=f=h=L=y=I=v=b=S=C=P=X=Y=null},z=function(t){s.addClass("ie").addClass("ie"+t);var o=function(){var t=function(){e(this).addClass("hover")},o=function(){e(this).removeClass("hover")};s.bind("mouseenter"+Y,t).bind("mouseleave"+Y,o),g.bind("mouseenter"+Y,t).bind("mouseleave"+Y,o),m.bind("mouseenter"+Y,t).bind("mouseleave"+Y,o),w.bind("mouseenter"+Y,t).bind("mouseleave"+Y,o),T.bind("mouseenter"+Y,t).bind("mouseleave"+Y,o)},n=function(){M=function(){var e={left:h+s.scrollLeft(),width:f};y?e.bottom=L:e.top=I,w.css(e);var t={top:b+s.scrollTop(),height:v};C?t.right=S:t.left=P,T.css(t),w.hide().show(),T.hide().show()}};6===t&&(o(),n())},Q="ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch,G=function(){var e=navigator.userAgent.toLowerCase().match(/(msie) ([\w.]+)/);e&&"msie"===e[1]&&z(parseInt(e[2],10)),W(),H(),j(),E(),B(),Q&&F(),s.mousewheel&&q(),l.useKeyboard&&A(),s.data("perfect-scrollbar",s),s.data("perfect-scrollbar-update",W),s.data("perfect-scrollbar-destroy",K)};return G(),s})}}); \ No newline at end of file +!function(a){"use strict";"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?a(require("jquery")):a(jQuery)}(function(a){"use strict";var b={wheelSpeed:10,wheelPropagation:!1,minScrollbarLength:null,useBothWheelAxes:!1,useKeyboard:!0,suppressScrollX:!1,suppressScrollY:!1,scrollXMarginOffset:0,scrollYMarginOffset:0,includePadding:!1},c=function(){var a=0;return function(){var b=a;return a+=1,".perfect-scrollbar-"+b}}();a.fn.perfectScrollbar=function(d,e){return this.each(function(){var f=a.extend(!0,{},b),g=a(this);if("object"==typeof d?a.extend(!0,f,d):e=d,"update"===e)return g.data("perfect-scrollbar-update")&&g.data("perfect-scrollbar-update")(),g;if("destroy"===e)return g.data("perfect-scrollbar-destroy")&&g.data("perfect-scrollbar-destroy")(),g;if(g.data("perfect-scrollbar"))return g.data("perfect-scrollbar");g.addClass("ps-container");var l,m,n,o,p,q,r,s,w,x,h=a("
").appendTo(g),i=a("
").appendTo(g),j=a("
").appendTo(h),k=a("
").appendTo(i),t=parseInt(h.css("bottom"),10),u=t===t,v=u?null:parseInt(h.css("top"),10),y=parseInt(i.css("right"),10),z=y===y,A=z?null:parseInt(i.css("left"),10),B="rtl"===g.css("direction"),C=c(),D=parseInt(h.css("borderLeftWidth"),10)+parseInt(h.css("borderRightWidth"),10),E=parseInt(h.css("borderTopWidth"),10)+parseInt(h.css("borderBottomWidth"),10),F=function(a,b){var c=a+b,d=o-w;x=0>c?0:c>d?d:c;var e=parseInt(x*(q-o)/(o-w),10);g.scrollTop(e),u?h.css({bottom:t-e}):h.css({top:v+e})},G=function(a,b){var c=a+b,d=n-r;s=0>c?0:c>d?d:c;var e=parseInt(s*(p-n)/(n-r),10);g.scrollLeft(e),z?i.css({right:y-e}):i.css({left:A+e})},H=function(a){return f.minScrollbarLength&&(a=Math.max(a,f.minScrollbarLength)),a},I=function(){var a={width:n,display:l?"inherit":"none"};a.left=B?g.scrollLeft()+n-p:g.scrollLeft(),u?a.bottom=t-g.scrollTop():a.top=v+g.scrollTop(),h.css(a);var b={top:g.scrollTop(),height:o,display:m?"inherit":"none"};z?b.right=B?p-g.scrollLeft()-y-k.outerWidth():y-g.scrollLeft():b.left=B?g.scrollLeft()+2*n-p-A-k.outerWidth():A+g.scrollLeft(),i.css(b),j.css({left:s,width:r-D}),k.css({top:x,height:w-E})},J=function(){n=f.includePadding?g.innerWidth():g.width(),o=f.includePadding?g.innerHeight():g.height(),p=g.prop("scrollWidth"),q=g.prop("scrollHeight"),!f.suppressScrollX&&n+f.scrollXMarginOffset=o-w&&(x=o-w),s>=n-r&&(s=n-r),I()},K=function(){var b,c;j.bind("mousedown"+C,function(a){c=a.pageX,b=j.position().left,h.addClass("in-scrolling"),a.stopPropagation(),a.preventDefault()}),a(document).bind("mousemove"+C,function(a){h.hasClass("in-scrolling")&&(G(b,a.pageX-c),a.stopPropagation(),a.preventDefault())}),a(document).bind("mouseup"+C,function(){h.hasClass("in-scrolling")&&h.removeClass("in-scrolling")}),b=c=null},L=function(){var b,c;k.bind("mousedown"+C,function(a){c=a.pageY,b=k.position().top,i.addClass("in-scrolling"),a.stopPropagation(),a.preventDefault()}),a(document).bind("mousemove"+C,function(a){i.hasClass("in-scrolling")&&(F(b,a.pageY-c),a.stopPropagation(),a.preventDefault())}),a(document).bind("mouseup"+C,function(){i.hasClass("in-scrolling")&&i.removeClass("in-scrolling")}),b=c=null},M=function(a,b){var c=g.scrollTop();if(0===a){if(!m)return!1;if(0===c&&b>0||c>=q-o&&0>b)return!f.wheelPropagation}var d=g.scrollLeft();if(0===b){if(!l)return!1;if(0===d&&0>a||d>=p-n&&a>0)return!f.wheelPropagation}return!0},N=function(){f.wheelSpeed/=10;var a=!1;g.bind("mousewheel"+C,function(b,c,d,e){var h=b.deltaX*b.deltaFactor||d,i=b.deltaY*b.deltaFactor||e;a=!1,f.useBothWheelAxes?m&&!l?(i?g.scrollTop(g.scrollTop()-i*f.wheelSpeed):g.scrollTop(g.scrollTop()+h*f.wheelSpeed),a=!0):l&&!m&&(h?g.scrollLeft(g.scrollLeft()+h*f.wheelSpeed):g.scrollLeft(g.scrollLeft()-i*f.wheelSpeed),a=!0):(g.scrollTop(g.scrollTop()-i*f.wheelSpeed),g.scrollLeft(g.scrollLeft()+h*f.wheelSpeed)),J(),a=a||M(h,i),a&&(b.stopPropagation(),b.preventDefault())}),g.bind("MozMousePixelScroll"+C,function(b){a&&b.preventDefault()})},O=function(){var b=!1;g.bind("mouseenter"+C,function(){b=!0}),g.bind("mouseleave"+C,function(){b=!1});var c=!1;a(document).bind("keydown"+C,function(d){if(b&&!a(document.activeElement).is(":input,[contenteditable]")){var e=0,f=0;switch(d.which){case 37:e=-30;break;case 38:f=30;break;case 39:e=30;break;case 40:f=-30;break;case 33:f=90;break;case 32:case 34:f=-90;break;case 35:f=-o;break;case 36:f=o;break;default:return}g.scrollTop(g.scrollTop()-f),g.scrollLeft(g.scrollLeft()+e),c=M(e,f),c&&d.preventDefault()}})},P=function(){var a=function(a){a.stopPropagation()};k.bind("click"+C,a),i.bind("click"+C,function(a){var b=parseInt(w/2,10),c=a.pageY-i.offset().top-b,d=o-w,e=c/d;0>e?e=0:e>1&&(e=1),g.scrollTop((q-o)*e)}),j.bind("click"+C,a),h.bind("click"+C,function(a){var b=parseInt(r/2,10),c=a.pageX-h.offset().left-b,d=n-r,e=c/d;0>e?e=0:e>1&&(e=1),g.scrollLeft((p-n)*e)})},Q=function(){var b=function(a,b){g.scrollTop(g.scrollTop()-b),g.scrollLeft(g.scrollLeft()-a),J()},c={},d=0,e={},f=null,h=!1;a(window).bind("touchstart"+C,function(){h=!0}),a(window).bind("touchend"+C,function(){h=!1}),g.bind("touchstart"+C,function(a){var b=a.originalEvent.targetTouches[0];c.pageX=b.pageX,c.pageY=b.pageY,d=(new Date).getTime(),null!==f&&clearInterval(f),a.stopPropagation()}),g.bind("touchmove"+C,function(a){if(!h&&1===a.originalEvent.targetTouches.length){var f=a.originalEvent.targetTouches[0],g={};g.pageX=f.pageX,g.pageY=f.pageY;var i=g.pageX-c.pageX,j=g.pageY-c.pageY;b(i,j),c=g;var k=(new Date).getTime(),l=k-d;l>0&&(e.x=i/l,e.y=j/l,d=k),a.preventDefault()}}),g.bind("touchend"+C,function(){clearInterval(f),f=setInterval(function(){return Math.abs(e.x)<.01&&Math.abs(e.y)<.01?(clearInterval(f),void 0):(b(30*e.x,30*e.y),e.x*=.8,e.y*=.8,void 0)},10)})},R=function(){g.bind("scroll"+C,function(){J()})},S=function(){g.unbind(C),a(window).unbind(C),a(document).unbind(C),g.data("perfect-scrollbar",null),g.data("perfect-scrollbar-update",null),g.data("perfect-scrollbar-destroy",null),j.remove(),k.remove(),h.remove(),i.remove(),h=i=j=k=l=m=n=o=p=q=r=s=t=u=v=w=x=y=z=A=B=C=null},T=function(b){g.addClass("ie").addClass("ie"+b);var c=function(){var b=function(){a(this).addClass("hover")},c=function(){a(this).removeClass("hover")};g.bind("mouseenter"+C,b).bind("mouseleave"+C,c),h.bind("mouseenter"+C,b).bind("mouseleave"+C,c),i.bind("mouseenter"+C,b).bind("mouseleave"+C,c),j.bind("mouseenter"+C,b).bind("mouseleave"+C,c),k.bind("mouseenter"+C,b).bind("mouseleave"+C,c)},d=function(){I=function(){var a={left:s+g.scrollLeft(),width:r};u?a.bottom=t:a.top=v,j.css(a);var b={top:x+g.scrollTop(),height:w};z?b.right=y:b.left=A,k.css(b),j.hide().show(),k.hide().show()}};6===b&&(c(),d())},U="ontouchstart"in window||window.DocumentTouch&&document instanceof window.DocumentTouch,V=function(){var a=navigator.userAgent.toLowerCase().match(/(msie) ([\w.]+)/);a&&"msie"===a[1]&&T(parseInt(a[2],10)),J(),R(),K(),L(),P(),U&&Q(),g.mousewheel&&N(),f.useKeyboard&&O(),g.data("perfect-scrollbar",g),g.data("perfect-scrollbar-update",J),g.data("perfect-scrollbar-destroy",S)};return V(),g})}}); \ No newline at end of file diff --git a/src/perfect-scrollbar.js b/src/perfect-scrollbar.js index 76d17b7..2a01e5d 100644 --- a/src/perfect-scrollbar.js +++ b/src/perfect-scrollbar.js @@ -102,7 +102,9 @@ isScrollbarYUsingRight = scrollbarYRight === scrollbarYRight, // !isNaN scrollbarYLeft = isScrollbarYUsingRight ? null: parseInt($scrollbarYRail.css('left'), 10), isRtl = $this.css('direction') === "rtl", - eventClassName = getEventClassName(); + eventClassName = getEventClassName(), + railBorderXWidth = parseInt($scrollbarXRail.css('borderLeftWidth'), 10) + parseInt($scrollbarXRail.css('borderRightWidth'), 10), + railBorderYWidth = parseInt($scrollbarXRail.css('borderTopWidth'), 10) + parseInt($scrollbarXRail.css('borderBottomWidth'), 10); var updateContentScrollTop = function (currentTop, deltaY) { var newTop = currentTop + deltaY, @@ -190,8 +192,8 @@ } $scrollbarYRail.css(scrollbarYStyles); - $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth}); - $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight}); + $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth - railBorderXWidth}); + $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight - railBorderYWidth}); if (scrollbarXActive) { $this.addClass('ps-active-x');