diff --git a/README.md b/README.md index 58a8592..9cf1840 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,10 @@ Default: 10 If this option is true, when the scroll reach the end of the side, mousewheel event will be propagated to parent element. 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 + How to Use ---------- @@ -85,7 +88,8 @@ With optional parameters: ```javascript $("#Demo").perfectScrollbar({ wheelSpeed: 20, - wheelPropagation: true + wheelPropagation: true, + minScrollbarLength: 20 }) ``` diff --git a/examples/options-minScrollbarLength.html b/examples/options-minScrollbarLength.html new file mode 100644 index 0000000..6db7fa6 --- /dev/null +++ b/examples/options-minScrollbarLength.html @@ -0,0 +1,35 @@ + + + + + perfect-scrollbar example - use wheelSpeed to change speed of scrolling + + + + + + + + +

No minimum

+
+
+
+
+

100px minimum

+
+
+
+
+ + diff --git a/src/perfect-scrollbar.js b/src/perfect-scrollbar.js index 10dbf91..58428bb 100644 --- a/src/perfect-scrollbar.js +++ b/src/perfect-scrollbar.js @@ -6,7 +6,8 @@ // The default settings for the plugin var defaultSettings = { wheelSpeed: 10, - wheelPropagation: false + wheelPropagation: false, + minScrollbarLength: null }; $.fn.perfectScrollbar = function (suppliedSettings, option) { @@ -66,6 +67,13 @@ $scrollbarY.css({right: scrollbarYRight - scrollLeft}); }; + var getSettingsAdjustedThumbSize = function (thumbSize) { + if (settings.minScrollbarLength) { + thumbSize = Math.max(thumbSize, settings.minScrollbarLength); + } + return thumbSize; + }; + var updateScrollbarCss = function () { $scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: scrollbarXWidth}); $scrollbarY.css({top: scrollbarYTop + $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYHeight}); @@ -77,7 +85,7 @@ contentWidth = $this.prop('scrollWidth'); contentHeight = $this.prop('scrollHeight'); if (containerWidth < contentWidth) { - scrollbarXWidth = parseInt(containerWidth * containerWidth / contentWidth, 10); + scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(containerWidth * containerWidth / contentWidth, 10)); scrollbarXLeft = parseInt($this.scrollLeft() * containerWidth / contentWidth, 10); } else { @@ -86,7 +94,7 @@ $this.scrollLeft(0); } if (containerHeight < contentHeight) { - scrollbarYHeight = parseInt(containerHeight * containerHeight / contentHeight, 10); + scrollbarYHeight = getSettingsAdjustedThumbSize(parseInt(containerHeight * containerHeight / contentHeight, 10)); scrollbarYTop = parseInt($this.scrollTop() * containerHeight / contentHeight, 10); } else {