From 0099bb556ca470c1ce4d1868269d3f5e658a49c9 Mon Sep 17 00:00:00 2001
From: Hyunje Alex Jun <me@noraesae.net>
Date: Tue, 12 Feb 2013 22:36:34 +0900
Subject: [PATCH] Supports the mobile touch scrolling.

Using touch events, support mobile scrolling with touch.
---
 src/perfect-scrollbar.js | 68 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/src/perfect-scrollbar.js b/src/perfect-scrollbar.js
index d8ba779..7886d0f 100644
--- a/src/perfect-scrollbar.js
+++ b/src/perfect-scrollbar.js
@@ -179,10 +179,75 @@
             });
         };
 
+        // 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 +255,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);