Release 0.2.5.

Patch notes
1. Bug fix.
2. Include min version with jquery-mousewheel.

.gitignore

@@ -0,0 +1 @@
+.DS_Store

README.md

@@ -39,7 +39,7 @@ It's cool, isn't it?
 Requirements
 ------------
 
-To make this plugin *perfect*, some requirements was not avoidable. But they're all very trivial and there's nothing to worry.
+To make this plugin *perfect*, some requirements were not avoidable. But they're all very trivial and there's nothing to worry about.
 
 * there must be the *one* content element(like div) for the container.
 * the container must have a 'position' css style.
@@ -72,6 +72,12 @@ If you want to destory the scrollbar:
 $('#Demo').perfectScrollbar('destroy');
 ```
 
+If you want to scroll to somewhere, just use scroll-top css and update.
+```javascript
+$("#Demo").scrollTop(0);
+$("#Demo").perfectScrollbar('update');
+```
+
 Very helpful friends
 --------------------
 

build

@@ -1,3 +1,4 @@
 #!/bin/sh
-uglifyjs src/perfect-scrollbar.js > min/perfect-scrollbar.min.js
+uglifyjs src/perfect-scrollbar.js -o min/perfect-scrollbar.min.js
+uglifyjs src/perfect-scrollbar.js src/jquery.mousewheel.js -o min/perfect-scrollbar.with-mousewheel.min.js
 cleancss src/perfect-scrollbar.css -o min/perfect-scrollbar.min.css

min/perfect-scrollbar.min.css

@@ -1 +1 @@
-.ps-container .ps-scrollbar-x{position:absolute;bottom:3px;height:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-x{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-x.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y{position:absolute;right:3px;width:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-y{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{opacity:.9;filter:alpha(opacity=90)}
+.ps-container .ps-scrollbar-x{position:absolute;bottom:3px;height:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-x{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-x.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y{position:absolute;right:3px;width:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-y{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{opacity:.9;filter:alpha(opacity=90)}

min/perfect-scrollbar.min.js

@@ -1,3 +1 @@
-/* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
- * Licensed under the MIT License
- */(function(e){e.fn.perfectScrollbar=function(t){if(t==="update")return e(this).data("perfect_scrollbar_update")&&e(this).data("perfect_scrollbar_update")(),e(this);if(t==="destroy")return e(this).data("perfect_scrollbar_destroy")&&e(this).data("perfect_scrollbar_destroy")(),e(this);if(e(this).data("perfect_scrollbar"))return e(this).data("perfect_scrollbar");var n=e(this).addClass("ps-container"),r=e(this).children(),i=e("<div class='ps-scrollbar-x'></div>").appendTo(n),s=e("<div class='ps-scrollbar-y'></div>").appendTo(n),o,u,a,f,l,c,h=parseInt(i.css("bottom")),p,d,v=parseInt(s.css("right")),m=function(){var e=parseInt(d*f/u);n.scrollTop(e),i.css({bottom:h-e})},g=function(){var e=parseInt(c*a/o);n.scrollLeft(e),s.css({right:v-e})},y=function(){o=n.width(),u=n.height(),a=r.width(),f=r.height(),o<a?(l=parseInt(o*o/a),c=parseInt(n.scrollLeft()*o/a)):(l=0,c=0),u<f?(p=parseInt(u*u/f),d=parseInt(n.scrollTop()*u/f)):(p=0,scrollbar_y_left=0),i.css({left:c+n.scrollLeft(),bottom:h-n.scrollTop(),width:l}),s.css({top:d+n.scrollTop(),right:v-n.scrollLeft(),height:p})},b=function(e,t){var r=e+t,s=o-l;r<0?c=0:r>s?c=s:c=r,i.css({left:c+n.scrollLeft()})},w=function(e,t){var r=e+t,i=u-p;r<0?d=0:r>i?d=i:d=r,s.css({top:d+n.scrollTop()})},E=function(){var t,n;i.bind("mousedown.perfect-scroll",function(e){n=e.pageX,t=i.position().left,i.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){i.hasClass("in-scrolling")&&(b(t,e.pageX-n),g(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){i.hasClass("in-scrolling")&&i.removeClass("in-scrolling")})},S=function(){var t,n;s.bind("mousedown.perfect-scroll",function(e){n=e.pageY,t=s.position().top,s.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){s.hasClass("in-scrolling")&&(w(t,e.pageY-n),m(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){s.hasClass("in-scrolling")&&s.removeClass("in-scrolling")})},x=function(){n.mousewheel(function(e,t,r,i){n.scrollTop(n.scrollTop()-i*10),n.scrollLeft(n.scrollLeft()+r*10),y(),(f>u||a>o)&&e.preventDefault()})},T=function(){i.remove(),s.remove(),n.unbind("mousewheel"),e(window).unbind("mousemove.perfect-scroll"),e(window).unbind("mouseup.perfect-scroll"),n.data("perfect_scrollbar",null),n.data("perfect_scrollbar_update",null),n.data("perfect_scrollbar_destroy",null)},N=function(){y(),E(),S(),n.mousewheel&&x(),n.data("perfect_scrollbar",n),n.data("perfect_scrollbar_update",y),n.data("perfect_scrollbar_destroy",T)};return N(),n}})(jQuery);
+(function($){$.fn.perfectScrollbar=function(option){if(option==="update"){if($(this).data("perfect_scrollbar_update")){$(this).data("perfect_scrollbar_update")()}return $(this)}else if(option==="destroy"){if($(this).data("perfect_scrollbar_destroy")){$(this).data("perfect_scrollbar_destroy")()}return $(this)}if($(this).data("perfect_scrollbar")){return $(this).data("perfect_scrollbar")}var $this=$(this).addClass("ps-container"),$content=$(this).children(),$scrollbar_x=$("<div class='ps-scrollbar-x'></div>").appendTo($this),$scrollbar_y=$("<div class='ps-scrollbar-y'></div>").appendTo($this),container_width,container_height,content_width,content_height,scrollbar_x_width,scrollbar_x_left,scrollbar_x_bottom=parseInt($scrollbar_x.css("bottom")),scrollbar_y_height,scrollbar_y_top,scrollbar_y_right=parseInt($scrollbar_y.css("right"));var updateContentScrollTop=function(){var scroll_top=parseInt(scrollbar_y_top*content_height/container_height);$this.scrollTop(scroll_top);$scrollbar_x.css({bottom:scrollbar_x_bottom-scroll_top})};var updateContentScrollLeft=function(){var scroll_left=parseInt(scrollbar_x_left*content_width/container_width);$this.scrollLeft(scroll_left);$scrollbar_y.css({right:scrollbar_y_right-scroll_left})};var updateBarSizeAndPosition=function(){container_width=$this.width();container_height=$this.height();content_width=$content.width();content_height=$content.height();if(container_width<content_width){scrollbar_x_width=parseInt(container_width*container_width/content_width);scrollbar_x_left=parseInt($this.scrollLeft()*container_width/content_width)}else{scrollbar_x_width=0;scrollbar_x_left=0;$this.scrollLeft(0)}if(container_height<content_height){scrollbar_y_height=parseInt(container_height*container_height/content_height);scrollbar_y_top=parseInt($this.scrollTop()*container_height/content_height)}else{scrollbar_y_height=0;scrollbar_y_left=0;$this.scrollTop(0)}$scrollbar_x.css({left:scrollbar_x_left+$this.scrollLeft(),bottom:scrollbar_x_bottom-$this.scrollTop(),width:scrollbar_x_width});$scrollbar_y.css({top:scrollbar_y_top+$this.scrollTop(),right:scrollbar_y_right-$this.scrollLeft(),height:scrollbar_y_height})};var moveBarX=function(current_left,delta_x){var new_left=current_left+delta_x,max_left=container_width-scrollbar_x_width;if(new_left<0){scrollbar_x_left=0}else if(new_left>max_left){scrollbar_x_left=max_left}else{scrollbar_x_left=new_left}$scrollbar_x.css({left:scrollbar_x_left+$this.scrollLeft()})};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 bindMouseScrollXHandler=function(){var current_left,current_page_x;$scrollbar_x.bind("mousedown.perfect-scroll",function(e){current_page_x=e.pageX;current_left=$scrollbar_x.position().left;$scrollbar_x.addClass("in-scrolling");e.stopPropagation();e.preventDefault()});$(document).bind("mousemove.perfect-scroll",function(e){if($scrollbar_x.hasClass("in-scrolling")){moveBarX(current_left,e.pageX-current_page_x);updateContentScrollLeft();e.stopPropagation();e.preventDefault()}});$(document).bind("mouseup.perfect-scroll",function(e){if($scrollbar_x.hasClass("in-scrolling")){$scrollbar_x.removeClass("in-scrolling")}})};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()});$(document).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()}});$(document).bind("mouseup.perfect-scroll",function(e){if($scrollbar_y.hasClass("in-scrolling")){$scrollbar_y.removeClass("in-scrolling")}})};var bindMouseWheelHandler=function(){$this.mousewheel(function(e,delta,deltaX,deltaY){$this.scrollTop($this.scrollTop()-deltaY*10);$this.scrollLeft($this.scrollLeft()+deltaX*10);updateBarSizeAndPosition();if(content_height>container_height||content_width>container_width){e.preventDefault()}})};var destroy=function(){$scrollbar_x.remove();$scrollbar_y.remove();$this.unbind("mousewheel");$(window).unbind("mousemove.perfect-scroll");$(window).unbind("mouseup.perfect-scroll");$this.data("perfect_scrollbar",null);$this.data("perfect_scrollbar_update",null);$this.data("perfect_scrollbar_destroy",null)};var initialize=function(){updateBarSizeAndPosition();bindMouseScrollXHandler();bindMouseScrollYHandler();if($this.mousewheel)bindMouseWheelHandler();$this.data("perfect_scrollbar",$this);$this.data("perfect_scrollbar_update",updateBarSizeAndPosition);$this.data("perfect_scrollbar_destroy",destroy)};initialize();return $this}})(jQuery);

perfect-scrollbar.jquery.json

@@ -0,0 +1,37 @@
+{
+  "name": "perfect-scrollbar",
+  "title": "perfect-scrollbar",
+  "description": "Tiny but perfect jquery scrollbar plugin.",
+  "version": "0.2.5",
+  "author": {
+    "name": "HyeonJe Jun",
+    "email": "noraesae@yuiazu.net",
+    "url": "https://github.com/noraesae/"
+  },
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/noraesae/perfect-scrollbar#license"
+    }
+  ],
+  "dependencies": {
+    "jquery": ">=1.8"
+  },
+  "keywords": [
+    "ui",
+    "scroll",
+    "scrollbar"
+  ],
+  "homepage": "http://noraesae.github.com/perfect-scrollbar/",
+  "docs": "https://github.com/noraesae/perfect-scrollbar/",
+  "download": "http://noraesae.github.com/perfect-scrollbar/",
+  "demo": "http://noraesae.github.com/perfect-scrollbar/",
+  "bugs": "https://github.com/noraesae/perfect-scrollbar/issues/",
+  "maintainers": [
+    {
+      "name": "HyeonJe Jun",
+      "email": "noraesae@yuiazu.net",
+      "url": "https://github.com/noraesae/"
+    }
+  ]
+}

src/jquery.mousewheel.js

@@ -0,0 +1,84 @@
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+    for ( var i=types.length; i; ) {
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+    }
+}
+
+$.event.special.mousewheel = {
+    setup: function() {
+        if ( this.addEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.addEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = handler;
+        }
+    },
+    
+    teardown: function() {
+        if ( this.removeEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.removeEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = null;
+        }
+    }
+};
+
+$.fn.extend({
+    mousewheel: function(fn) {
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+    },
+    
+    unmousewheel: function(fn) {
+        return this.unbind("mousewheel", fn);
+    }
+});
+
+
+function handler(event) {
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+    event = $.event.fix(orgEvent);
+    event.type = "mousewheel";
+    
+    // Old school scrollwheel delta
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
+    
+    // New school multidimensional scroll (touchpads) deltas
+    deltaY = delta;
+    
+    // Gecko
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+        deltaY = 0;
+        deltaX = -1*delta;
+    }
+    
+    // Webkit
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+    
+    // Add event and delta to the front of the arguments
+    args.unshift(event, delta, deltaX, deltaY);
+    
+    return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);

src/perfect-scrollbar.css

@@ -38,6 +38,7 @@
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     opacity: 0;
+    filter: alpha(opacity = 0);
     -webkit-transition: opacity.2s linear;
     -moz-transition: opacity .2s linear;
     transition: opacity .2s linear;

src/perfect-scrollbar.js

@@ -60,6 +60,7 @@
             else {
                 scrollbar_x_width = 0;
                 scrollbar_x_left = 0;
+                $this.scrollLeft(0);
             }
             if(container_height < content_height) {
                 scrollbar_y_height = parseInt(container_height * container_height / content_height);
@@ -68,6 +69,7 @@
             else {
                 scrollbar_y_height = 0;
                 scrollbar_y_left = 0;
+                $this.scrollTop(0);
             }
 
             $scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft(), bottom: scrollbar_x_bottom - $this.scrollTop(), width: scrollbar_x_width});
@@ -118,7 +120,7 @@
                 e.preventDefault();
             });
 
-            $(window).bind('mousemove.perfect-scroll', function(e) {
+            $(document).bind('mousemove.perfect-scroll', function(e) {
                 if($scrollbar_x.hasClass('in-scrolling')) {
                     moveBarX(current_left, e.pageX - current_page_x);
                     updateContentScrollLeft();
@@ -127,7 +129,7 @@
                 }
             });
 
-            $(window).bind('mouseup.perfect-scroll', function(e) {
+            $(document).bind('mouseup.perfect-scroll', function(e) {
                 if($scrollbar_x.hasClass('in-scrolling')) {
                     $scrollbar_x.removeClass('in-scrolling');
                 }
@@ -146,7 +148,7 @@
                 e.preventDefault();
             });
 
-            $(window).bind('mousemove.perfect-scroll', function(e) {
+            $(document).bind('mousemove.perfect-scroll', function(e) {
                 if($scrollbar_y.hasClass('in-scrolling')) {
                     moveBarY(current_top, e.pageY - current_page_y);
                     updateContentScrollTop();
@@ -155,7 +157,7 @@
                 }
             });
 
-            $(window).bind('mouseup.perfect-scroll', function(e) {
+            $(document).bind('mouseup.perfect-scroll', function(e) {
                 if($scrollbar_y.hasClass('in-scrolling')) {
                     $scrollbar_y.removeClass('in-scrolling');
                 }