diff --git a/min/perfect-scrollbar.min.css b/min/perfect-scrollbar.min.css new file mode 100644 index 0000000..e1bf410 --- /dev/null +++ b/min/perfect-scrollbar.min.css @@ -0,0 +1 @@ +.ps-container .ps-scrollbar-y{position:absolute;width:10px;right:5px;background-color:gray}.ps-container .ps-scrollbar-y:hover{background-color:#000;cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{background-color:#000} \ No newline at end of file diff --git a/min/perfect-scrollbar.min.js b/min/perfect-scrollbar.min.js index d7bf577..9743434 100644 --- a/min/perfect-scrollbar.min.js +++ b/min/perfect-scrollbar.min.js @@ -1,3 +1,3 @@ /* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae) * Licensed under the MIT License - */(function(e){e.fn.perfectScrollbar=function(){e(this).mousewheel(function(t,n,r,i){e(this).scrollTop(e(this).scrollTop()-i*10),e(this).scrollLeft(e(this).scrollLeft()+r*10),t.preventDefault()})}})(jQuery); \ No newline at end of file + */(function(e){e.fn.perfectScrollbar=function(){var t=e(this),n=e(this).children(),r=e("
").appendTo(t),i,s,o,u;t.addClass("ps-container");var a=function(){t.scrollTop(parseInt(u*s/i))},f=function(){i=t.height(),s=n.height(),o=parseInt(i*i/s),u=parseInt(t.scrollTop()*i/s),r.css({top:u+t.scrollTop(),height:o})},l=function(e,n){var s=e+n,a=i-o;s<0?u=0:s>a?u=a:u=s,r.css({top:u+t.scrollTop()})},c=function(){var t,n;r.bind("mousedown.perfect-scroll",function(e){n=e.pageY,t=r.position().top,r.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){r.hasClass("in-scrolling")&&(l(t,e.pageY-n),a(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){r.hasClass("in-scrolling")&&r.removeClass("in-scrolling")})},h=function(){t.mousewheel(function(e,n,r,i){t.scrollTop(t.scrollTop()-i*10),t.scrollLeft(t.scrollLeft()+r*10),f(),e.preventDefault()})};return f(),c(),t.mousewheel&&h(),t}})(jQuery); \ No newline at end of file diff --git a/src/perfect-scrollbar.css b/src/perfect-scrollbar.css new file mode 100644 index 0000000..1a5454e --- /dev/null +++ b/src/perfect-scrollbar.css @@ -0,0 +1,15 @@ +.ps-container .ps-scrollbar-y { + position: absolute; + width: 10px; + right: 5px; + background-color: gray; +} + +.ps-container .ps-scrollbar-y:hover { + background-color: black; + cursor: default; +} + +.ps-container .ps-scrollbar-y.in-scrolling { + background-color: black; +} diff --git a/src/perfect-scrollbar.js b/src/perfect-scrollbar.js index c1ea04c..74051a2 100644 --- a/src/perfect-scrollbar.js +++ b/src/perfect-scrollbar.js @@ -3,10 +3,92 @@ */ ((function($) { $.fn.perfectScrollbar = function() { - $(this).mousewheel(function(e, delta, deltaX, deltaY) { - $(this).scrollTop($(this).scrollTop() - (deltaY * 10)); - $(this).scrollLeft($(this).scrollLeft() + (deltaX * 10)); - e.preventDefault(); - }); + var $this = $(this), + $content = $(this).children(), + $scrollbar_y = $("
").appendTo($this), + container_height, + content_height, + scrollbar_y_height, + scrollbar_y_top; + + // add class + $this.addClass('ps-container'); + + var updateContentScrollTop = function() { + $this.scrollTop(parseInt(scrollbar_y_top * content_height / container_height)); + }; + + var updateBarSizeAndPosition = function() { + container_height = $this.height(); + content_height = $content.height(); + scrollbar_y_height = parseInt(container_height * container_height / content_height); + scrollbar_y_top = parseInt($this.scrollTop() * container_height / content_height); + + $scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop(), height: scrollbar_y_height}); + }; + + var moveBarY = function(current_top, delta_y) { + var new_top = current_top + delta_y, + max_top = container_height - scrollbar_y_height; + + if(new_top < 0) { + scrollbar_y_top = 0; + } + else if(new_top > max_top) { + scrollbar_y_top = max_top; + } + else { + scrollbar_y_top = new_top; + } + $scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop()}); + }; + + var bindMouseScrollYHandler = function() { + var current_top, + current_page_y; + + $scrollbar_y.bind('mousedown.perfect-scroll', function(e) { + current_page_y = e.pageY; + current_top = $scrollbar_y.position().top; + $scrollbar_y.addClass('in-scrolling'); + e.stopPropagation(); + e.preventDefault(); + }); + + $(window).bind('mousemove.perfect-scroll', function(e) { + if($scrollbar_y.hasClass('in-scrolling')) { + moveBarY(current_top, e.pageY - current_page_y); + updateContentScrollTop(); + e.stopPropagation(); + e.preventDefault(); + } + }); + + $(window).bind('mouseup.perfect-scroll', function(e) { + if($scrollbar_y.hasClass('in-scrolling')) { + $scrollbar_y.removeClass('in-scrolling'); + } + }); + }; + + // bind handlers + var bindMouseWheelHandler = function() { + $this.mousewheel(function(e, delta, deltaX, deltaY) { + $this.scrollTop($this.scrollTop() - (deltaY * 10)); + $this.scrollLeft($this.scrollLeft() + (deltaX * 10)); + + // update bar position + updateBarSizeAndPosition(); + + e.preventDefault(); + }); + }; + + // initialize + updateBarSizeAndPosition(); + bindMouseScrollYHandler(); + if($this.mousewheel) bindMouseWheelHandler(); + + return $this; }; })(jQuery));