Release 0.3.1.

Patch notes
1. Mobile touch support.
2. Scrolling logic enhancement.
3. Bug fix.

.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)}

perfect-scrollbar.jquery.json

@@ -0,0 +1,37 @@
+{
+  "name": "perfect-scrollbar",
+  "title": "perfect-scrollbar",
+  "description": "Tiny but perfect jquery scrollbar plugin.",
+  "version": "0.3.1",
+  "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

@@ -51,8 +51,8 @@
         var updateBarSizeAndPosition = function() {
             container_width = $this.width();
             container_height = $this.height();
-            content_width = $content.width();
-            content_height = $content.height();
+            content_width = $content.outerWidth(false);
+            content_height = $content.outerHeight(false);
             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);
@@ -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});
@@ -88,7 +90,7 @@
                 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,
@@ -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');
                 }
@@ -164,6 +166,25 @@
 
         // bind handlers
         var bindMouseWheelHandler = function() {
+            var shouldPreventDefault = function(deltaX, deltaY) {
+                var scrollTop = $this.scrollTop();
+                if(scrollTop == 0 && deltaY > 0 && deltaX == 0) {
+                    return false;
+                }
+                else if(scrollTop >= content_height - container_height && deltaY < 0 && deltaX == 0) {
+                    return false;
+                }
+
+                var scrollLeft = $this.scrollLeft();
+                if(scrollLeft == 0 && deltaX < 0 && deltaY == 0) {
+                    return false;
+                }
+                else if(scrollLeft >= content_width - container_width && deltaX > 0 && deltaY == 0) {
+                    return false;
+                }
+                return true;
+            };
+
             $this.mousewheel(function(e, delta, deltaX, deltaY) {
                 $this.scrollTop($this.scrollTop() - (deltaY * 10));
                 $this.scrollLeft($this.scrollLeft() + (deltaX * 10));
@@ -171,16 +192,81 @@
                 // update bar position
                 updateBarSizeAndPosition();
 
-                if(content_height > container_height || content_width > container_width) {
+                if(shouldPreventDefault(deltaX, deltaY)) {
                     e.preventDefault();
                 }
             });
         };
 
+        // bind mobile touch handler
+        var bindMobileTouchHandler = function() {
+            var applyTouchMove = function(difference_x, difference_y) {
+                $this.scrollTop($this.scrollTop() - difference_y);
+                $this.scrollLeft($this.scrollLeft() - difference_x);
+
+                // update bar position
+                updateBarSizeAndPosition();
+            };
+
+            var start_coords = {},
+                start_time = 0,
+                speed = {},
+                breaking_process = null;
+
+            $this.bind("touchstart.perfect-scroll", function(e) {
+                var touch = e.originalEvent.targetTouches[0];
+
+                start_coords.pageX = touch.pageX;
+                start_coords.pageY = touch.pageY;
+
+                start_time = (new Date()).getTime();
+
+                if (breaking_process !== null) {
+                    clearInterval(breaking_process);
+                }
+            });
+            $this.bind("touchmove.perfect-scroll", function(e) {
+                var touch = e.originalEvent.targetTouches[0];
+
+                var current_coords = {};
+                current_coords.pageX = touch.pageX;
+                current_coords.pageY = touch.pageY;
+
+                var difference_x = current_coords.pageX - start_coords.pageX,
+                    difference_y = current_coords.pageY - start_coords.pageY;
+
+                applyTouchMove(difference_x, difference_y);
+                start_coords = current_coords;
+
+                var current_time = (new Date()).getTime();
+                speed.x = difference_x / (current_time - start_time);
+                speed.y = difference_y / (current_time - start_time);
+                start_time = current_time;
+
+                e.preventDefault();
+            });
+            $this.bind("touchend.perfect-scroll", function(e) {
+                breaking_process = setInterval(function() {
+                    if(Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
+                        clearInterval(breaking_process);
+                        return;
+                    }
+
+                    applyTouchMove(speed.x * 30, speed.y * 30);
+
+                    speed.x *= 0.8;
+                    speed.y *= 0.8;
+                }, 10);
+            });
+        };
+
         var destroy = function() {
             $scrollbar_x.remove();
             $scrollbar_y.remove();
             $this.unbind('mousewheel');
+            $this.unbind('touchstart.perfect-scroll');
+            $this.unbind('touchmove.perfect-scroll');
+            $this.unbind('touchend.perfect-scroll');
             $(window).unbind('mousemove.perfect-scroll');
             $(window).unbind('mouseup.perfect-scroll');
             $this.data('perfect_scrollbar', null);
@@ -188,10 +274,13 @@
             $this.data('perfect_scrollbar_destroy', null);
         };
 
+        var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
+
         var initialize = function() {
             updateBarSizeAndPosition();
             bindMouseScrollXHandler();
             bindMouseScrollYHandler();
+            if(isMobile) bindMobileTouchHandler();
             if($this.mousewheel) bindMouseWheelHandler();
             $this.data('perfect_scrollbar', $this);
             $this.data('perfect_scrollbar_update', updateBarSizeAndPosition);