diff --git a/README.md b/README.md index abb8bb4..20bbb05 100644 --- a/README.md +++ b/README.md @@ -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 ---------- diff --git a/src/perfect-scrollbar.js b/src/perfect-scrollbar.js index c684b93..93f089c 100644 --- a/src/perfect-scrollbar.js +++ b/src/perfect-scrollbar.js @@ -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);