Release 0.3.1.

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

perfect-scrollbar.jquery.json

@@ -2,7 +2,7 @@
   "name": "perfect-scrollbar",
   "title": "perfect-scrollbar",
   "description": "Tiny but perfect jquery scrollbar plugin.",
-  "version": "0.2.5",
+  "version": "0.3.1",
   "author": {
     "name": "HyeonJe Jun",
     "email": "noraesae@yuiazu.net",

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);
@@ -90,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,
@@ -166,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));
@@ -173,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);
@@ -190,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);