From 8ea7291469a2f4850ce911e0e853e64a6c34defe Mon Sep 17 00:00:00 2001
From: Hyunje Alex Jun <me@noraesae.net>
Date: Mon, 30 Sep 2013 17:24:12 +0900
Subject: [PATCH] Implement keyboard scrolling.

Now when the element is hovered by mouse cursor, it can be scrolled
with arrow keys on the keyboard.
---
 README.md                |  4 +++
 src/perfect-scrollbar.js | 73 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 76 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e86f14e..abb8bb4 100644
--- a/README.md
+++ b/README.md
@@ -70,6 +70,10 @@ When set to an integer value, the thumb part of the scrollbar will not shrink be
 When set to true, and only one (vertical or horizontal) scrollbar is visible then both vertical and horizontal scrolling will affect the scrollbar.  
 **Default: false**
 
+### useKeyboard
+When set to true, the scroll works with arrow keys on the keyboard. The element is scrolled only when the mouse cursor hovers the element.  
+**Default: true**
+
 How to Use
 ----------
 
diff --git a/src/perfect-scrollbar.js b/src/perfect-scrollbar.js
index 54e3669..66858ed 100644
--- a/src/perfect-scrollbar.js
+++ b/src/perfect-scrollbar.js
@@ -17,7 +17,8 @@
     wheelSpeed: 10,
     wheelPropagation: false,
     minScrollbarLength: null,
-    useBothWheelAxes: false
+    useBothWheelAxes: false,
+    useKeyboard: true
   };
 
   $.fn.perfectScrollbar = function (suppliedSettings, option) {
@@ -297,6 +298,73 @@
         });
       };
 
+      var bindKeyboardHandler = function () {
+        var shouldPreventDefault = function (deltaX, deltaY) {
+          var scrollTop = $this.scrollTop();
+          if (scrollTop === 0 && deltaY > 0 && deltaX === 0) {
+            return false;
+          }
+          else if (scrollTop >= contentHeight - containerHeight && deltaY < 0 && deltaX === 0) {
+            return false;
+          }
+
+          var scrollLeft = $this.scrollLeft();
+          if (scrollLeft === 0 && deltaX < 0 && deltaY === 0) {
+            return false;
+          }
+          else if (scrollLeft >= contentWidth - containerWidth && deltaX > 0 && deltaY === 0) {
+            return false;
+          }
+          return true;
+        };
+
+        var hovered = false;
+        $this.bind('mouseenter.perfect-scrollbar', function (e) {
+          hovered = true;
+        });
+        $this.bind('mouseleave.perfect-scrollbar', function (e) {
+          hovered = false;
+        });
+
+        var shouldPrevent = false;
+        $(document).bind('keydown.perfect-scrollbar', function (e) {
+          if (!hovered) {
+            return;
+          }
+
+          var deltaX = 0,
+              deltaY = 0;
+
+          switch (e.which) {
+          case 37: // left
+            deltaX = -3;
+            break;
+          case 38: // up
+            deltaY = 3;
+            break;
+          case 39: // right
+            deltaX = 3;
+            break;
+          case 40: // down
+            deltaY = -3;
+            break;
+          default:
+            return;
+          }
+
+          $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+          $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
+
+          // update bar position
+          updateBarSizeAndPosition();
+
+          shouldPrevent = shouldPreventDefault(deltaX, deltaY);
+          if (shouldPrevent) {
+            e.preventDefault();
+          }
+        });
+      };
+
       // bind mobile touch handler
       var bindMobileTouchHandler = function () {
         var applyTouchMove = function (differenceX, differenceY) {
@@ -456,6 +524,9 @@
         if ($this.mousewheel) {
           bindMouseWheelHandler();
         }
+        if (settings.useKeyboard) {
+          bindKeyboardHandler();
+        }
         $this.data('perfect-scrollbar', $this);
         $this.data('perfect-scrollbar-update', updateBarSizeAndPosition);
         $this.data('perfect-scrollbar-destroy', destroy);