cartodb4/perfect-scrollbar
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added optional useBothWheelAxes to allow more flexible scrolling if only one axe is scrollable

Browse Source
This commit is contained in:
Jakub Malinowski 2013-09-28 00:53:57 +02:00
parent 58261f2ace
commit 16998f95f1
2 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -65,7 +65,11 @@ Default: false
### minScrollbarLength
When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels.
Default: null
### useBothWheelAxes
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
How to Use
----------

33
src/perfect-scrollbar.js
View File

@ -8,7 +8,8 @@
var defaultSettings = {
wheelSpeed: 10,
wheelPropagation: false,
minScrollbarLength: null
minScrollbarLength: null,
useBothWheelAxes: false
};
$.fn.perfectScrollbar = function (suppliedSettings, option) {
@ -54,6 +55,8 @@
var $scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
$scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($this),
scrollbarXActive,
scrollbarYActive,
containerWidth,
containerHeight,
contentWidth,
@ -96,20 +99,24 @@
contentHeight = $this.prop('scrollHeight');
if (containerWidth < contentWidth) {
scrollbarXActive = true;
scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(containerWidth * containerWidth / contentWidth, 10));
scrollbarXLeft = parseInt($this.scrollLeft() * (containerWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10);
}
else {
scrollbarXActive = false;
scrollbarXWidth = 0;
scrollbarXLeft = 0;
$this.scrollLeft(0);
}
if (containerHeight < contentHeight) {
scrollbarYActive = true;
scrollbarYHeight = getSettingsAdjustedThumbSize(parseInt(containerHeight * containerHeight / contentHeight, 10));
scrollbarYTop = parseInt($this.scrollTop() * (containerHeight - scrollbarYHeight) / (contentHeight - containerHeight), 10);
}
else {
scrollbarYActive = false;
scrollbarYHeight = 0;
scrollbarYTop = 0;
$this.scrollTop(0);
@ -242,8 +249,28 @@
var shouldPrevent = false;
$this.bind('mousewheel.perfect-scroll', function (e, delta, deltaX, deltaY) {
$this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
$this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
if (!settings.useBothWheelAxes) {
// deltaX will only be used for horizontal scrolling and deltaY will
// only be used for vertical scrolling - this is the default
$this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
$this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
} else if (scrollbarYActive && !scrollbarXActive) {
// only vertical scrollbar is active and useBothWheelAxes option is
// active, so let's scroll vertical bar using both mouse wheel axes
if (deltaY) {
$this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
} else {
$this.scrollTop($this.scrollTop() + (deltaX * settings.wheelSpeed));
}
} else if (scrollbarXActive && !scrollbarYActive) {
// useBothWheelAxes and only horizontal bar is active, so use both
// wheel axes for horizontal bar
if (deltaX) {
$this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
} else {
$this.scrollLeft($this.scrollLeft() - (deltaY * settings.wheelSpeed));
}
}
// update bar position
updateBarSizeAndPosition();