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

Added 4 new setting options (suppressScrollX, suppressScrollY, scrollXMarginOffset and scrollYMarginOffset)

Browse Source 
Added 4 new setting options (suppressScrollX, suppressScrollY,
scrollXMarginOffset and scrollYMarginOffset)
This commit is contained in:
Adrian Carneiro 2013-11-06 15:20:30 -05:00
parent ad0e1e4fab
commit fa806adb55
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. 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** **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 How to Use
---------- ----------

14
src/perfect-scrollbar.js
View File

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