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

Merge pull request #77 from adrianonantua/master

Browse Source 
Added 4 new setting options (suppressScrollX, suppressScrollY, scrollXMarginOffset and scrollYMarginOffset)
This commit is contained in:
Hyunje Alex Jun 2013-12-05 18:25:25 -08:00
commit 6595d602b1
2 changed files with 25 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -74,6 +74,22 @@ When set to true, and only one (vertical or horizontal) scrollbar is visible the
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**
### suppressScrollX
When set to true, the scroll bar in X axis will not be available, regardless of the content width.
**Default: false**
### suppressScrollY
When set to true, the scroll bar in Y axis will not be available, regardless of the content height.
**Default: false**
### scrollXMarginOffset
The number of pixels the content width can surpass the container width without enabling the X axis scroll bar. Allows some "wiggle room" or "offset break", so that X axis scroll bar is not enabled just because of a few pixels.
**Default: 0**
### scrollYMarginOffset
The number of pixels the content height can surpass the container height without enabling the Y axis scroll bar. Allows some "wiggle room" or "offset break", so that Y axis scroll bar is not enabled just because of a few pixels.
**Default: 0**
How to Use
----------

14
src/perfect-scrollbar.js
View File

@ -18,7 +18,11 @@
wheelPropagation: false,
minScrollbarLength: null,
useBothWheelAxes: false,
useKeyboard: true
useKeyboard: true,
suppressScrollX: false,
suppressScrollY: false,
scrollXMarginOffset: 0,
scrollYMarginOffset: 0
};
$.fn.perfectScrollbar = function (suppliedSettings, option) {
@ -99,8 +103,8 @@
};
var updateScrollbarCss = function () {
$scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth});
$scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight});
$scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth, display: settings.suppressScrollX ? "none": "inherit"});
$scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: settings.suppressScrollY ? "none": "inherit"});
$scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth});
$scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight});
};
@ -111,7 +115,7 @@
contentWidth = $this.prop('scrollWidth');
contentHeight = $this.prop('scrollHeight');
if (containerWidth < contentWidth) {
if (!settings.suppressScrollX && containerWidth + settings.scrollXMarginOffset < contentWidth) {
scrollbarXActive = true;
scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(containerWidth * containerWidth / contentWidth, 10));
scrollbarXLeft = parseInt($this.scrollLeft() * (containerWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10);
@ -123,7 +127,7 @@
$this.scrollLeft(0);
}
if (containerHeight < contentHeight) {
if (!settings.suppressScrollY && containerHeight + settings.scrollYMarginOffset < contentHeight) {
scrollbarYActive = true;
scrollbarYHeight = getSettingsAdjustedThumbSize(parseInt(containerHeight * containerHeight / contentHeight, 10));
scrollbarYTop = parseInt($this.scrollTop() * (containerHeight - scrollbarYHeight) / (contentHeight - containerHeight), 10);