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);