Implement keyboard scrolling.
Now when the element is hovered by mouse cursor, it can be scrolled with arrow keys on the keyboard.
This commit is contained in:
parent
c4632c97ed
commit
8ea7291469
@ -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.
|
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**
|
**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
|
How to Use
|
||||||
----------
|
----------
|
||||||
|
|
||||||
|
@ -17,7 +17,8 @@
|
|||||||
wheelSpeed: 10,
|
wheelSpeed: 10,
|
||||||
wheelPropagation: false,
|
wheelPropagation: false,
|
||||||
minScrollbarLength: null,
|
minScrollbarLength: null,
|
||||||
useBothWheelAxes: false
|
useBothWheelAxes: false,
|
||||||
|
useKeyboard: true
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn.perfectScrollbar = function (suppliedSettings, option) {
|
$.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
|
// bind mobile touch handler
|
||||||
var bindMobileTouchHandler = function () {
|
var bindMobileTouchHandler = function () {
|
||||||
var applyTouchMove = function (differenceX, differenceY) {
|
var applyTouchMove = function (differenceX, differenceY) {
|
||||||
@ -456,6 +524,9 @@
|
|||||||
if ($this.mousewheel) {
|
if ($this.mousewheel) {
|
||||||
bindMouseWheelHandler();
|
bindMouseWheelHandler();
|
||||||
}
|
}
|
||||||
|
if (settings.useKeyboard) {
|
||||||
|
bindKeyboardHandler();
|
||||||
|
}
|
||||||
$this.data('perfect-scrollbar', $this);
|
$this.data('perfect-scrollbar', $this);
|
||||||
$this.data('perfect-scrollbar-update', updateBarSizeAndPosition);
|
$this.data('perfect-scrollbar-update', updateBarSizeAndPosition);
|
||||||
$this.data('perfect-scrollbar-destroy', destroy);
|
$this.data('perfect-scrollbar-destroy', destroy);
|
||||||
|
Loading…
Reference in New Issue
Block a user