#17 Fixed thumb height and width

mzubala · mzubala · commit 54f99131d9d9 · 2013-10-07T14:58:06.000+02:00
diff --git a/README.textile b/README.textile
@@ -81,6 +81,9 @@ There are some options you can pass when initializing scrollbar:
 
 |_. Option |_. Type|_. Default value |_. Description |
 | <code>animationSpeed</code> | <code>Number</code> | <code>300</code> | Speed of the animation of programmatic scrolling. It's possible to edit it with <code>setAnimationSpeed</code> method. Animation speed equal to <code>0</code> means no animation.|
+| <code>fixedThumbHeight</code> | <code>Number</code> | <code>undefined</code> | By default thumb height (in case of vertical scrollbar) is calculated automatically depending on viewport and overview height but you can fix thumb height to your chosen pixel value by setting this option. Make sure to not set <code>min-height</code> in css if you set <code>fixedThumbHeight</code> because <code>min-height</code> has priority.|
+| <code>fixedThumbWidth</code> | <code>Number</code> | <code>undefined</code> | Option analogical to <code>fixedThumbHeight</code> but applied to thumbs of horizontal scrollbar.|
+| <code>hScroll</code> | <code>Boolean</code> | <code>true</code> | Indicates whether or not, horizontal scrollbar should be shown when it's necessary. |
 | <code>hScroll</code> | <code>Boolean</code> | <code>true</code> | Indicates whether or not, horizontal scrollbar should be shown when it's necessary. |
 | <code>skin</code>|<code>String</code>|<code>undefined</code>|A css skin class that will be added to the scrolled container. You can define it in html as well as here in options. Note that skin has to be defined in one of those ways.|
 | <code>swipeSpeed</code>|<code>Number</code>|<code>1</code>|Indicates how fast touch scroll should be. When you swipe your finger by <code>x</code> pixels the content will be scrolled by <code>swipeSpeed * x</code> pixels.|
diff --git a/demos/basic.html b/demos/basic.html
@@ -65,6 +65,16 @@
             min-width: 300px;
         }
 
+        #fixed-thumb-size-demo {
+            width: 400px;
+            height: 200px;
+        }
+
+            /* Vertical and horizontal scrollbar - one extra step required - add width of overview - overall width of scrolled content*/
+        #fixed-thumb-size-demo .overview {
+            width: 600px;
+        }
+
     </style>
 </head>
 <body>
@@ -162,9 +172,40 @@ <h2>Min thumb size</h2>
     interdum massa nibh nec erat.
 </div>
 
+<h2>Fixed thumb size</h2>
+
+<!-- Add a skin class to the scrolled div: default-skin in this case -->
+<div id="fixed-thumb-size-demo" class="default-skin">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed,
+    lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
+    Quisque
+    semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed
+    posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
+    tempus
+    metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
+    Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
+    eget
+    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi,
+    in
+    interdum massa nibh nec erat.
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed,
+    lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
+    Quisque
+    semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed
+    posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel
+    tempus
+    metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque.
+    Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus
+    eget
+    nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi,
+    in
+    interdum massa nibh nec erat.
+</div>
+
 <script type="text/javascript">
     $(window).load(function () {
         $(".demo").customScrollbar();
+        $("#fixed-thumb-size-demo").customScrollbar({fixedThumbHeight: 50, fixedThumbWidth: 60});
     });
 </script>
 </body>
diff --git a/jquery.custom-scrollbar.js b/jquery.custom-scrollbar.js
@@ -10,7 +10,9 @@
       animationSpeed: 300,
       onCustomScroll: undefined,
       swipeSpeed: 1,
-      wheelSpeed: 40
+      wheelSpeed: 40,
+      fixedThumbWidth: undefined,
+      fixedThumbHeight: undefined
     }
 
     var Scrollable = function (element, options) {
@@ -208,7 +210,7 @@
         this.overviewSize = this.sizing.size(this.scrollable.$overview);
         this.ratio = this.viewPortSize / this.overviewSize;
         this.sizing.size(this.$scrollBar, this.viewPortSize);
-        this.thumbSize = Math.max(Math.round(this.ratio * this.viewPortSize), this.sizing.minSize(this.$thumb));
+        this.thumbSize = this.calculateThumbSize();
         this.sizing.size(this.$thumb, this.thumbSize);
         this.maxThumbPosition = this.calculateMaxThumbPosition();
         this.maxOverviewPosition = this.calculateMaxOverviewPosition();
@@ -222,6 +224,16 @@
         this.$scrollBar.toggle(this.enabled);
       },
 
+      calculateThumbSize: function () {
+        var fixedSize = this.sizing.fixedThumbSize(this.scrollable.options)
+        var size;
+        if (fixedSize)
+          size = fixedSize;
+        else
+          size = this.ratio * this.viewPortSize
+        return Math.max(size, this.sizing.minSize(this.$thumb));
+      },
+
       initMouseMoveScrolling: function () {
         var _this = this;
         this.$thumb.mousedown(function (event) {
@@ -543,6 +555,10 @@
         return parseInt($el.css("min-width")) || 0;
       },
 
+      fixedThumbSize: function (options) {
+        return options.fixedThumbWidth;
+      },
+
       scrollBar: function ($el) {
         return $el.find(".scroll-bar.horizontal");
       },
@@ -603,6 +619,10 @@
         return parseInt($el.css("min-height")) || 0;
       },
 
+      fixedThumbSize: function (options) {
+        return options.fixedThumbHeight;
+      },
+
       scrollBar: function ($el) {
         return $el.find(".scroll-bar.vertical");
       },
