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

minScrollbarLength setting

Browse Source 
I couldn't figure out the rebasing stuff so I just deleted my fork and
redid the work.  I believe I followed the contributing guidlines
correctly as well.
This commit is contained in:
Drew Miller 2013-07-17 12:53:02 -04:00
parent 68c297fe2c
commit ab2a018c93
3 changed files with 52 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -62,6 +62,9 @@ Default: 10
If this option is true, when the scroll reach the end of the side, mousewheel event will be propagated to parent element. If this option is true, when the scroll reach the end of the side, mousewheel event will be propagated to parent element.
Default: false 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 How to Use
---------- ----------
@ -85,7 +88,8 @@ With optional parameters:
```javascript ```javascript
$("#Demo").perfectScrollbar({ $("#Demo").perfectScrollbar({
wheelSpeed: 20, wheelSpeed: 20,
wheelPropagation: true wheelPropagation: true,
minScrollbarLength: 20
}) })
``` ```

35
examples/options-minScrollbarLength.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>perfect-scrollbar example - use wheelSpeed to change speed of scrolling</title>
<link href="../src/perfect-scrollbar.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../src/jquery.mousewheel.js"></script>
<script src="../src/perfect-scrollbar.js"></script>
<style>
.contentHolder { position:relative; margin:0px auto; padding:0px; width: 640px; height: 360px; overflow: hidden; }
.contentHolder .content { background-image: url('./azusa.jpg'); width: 12800px; height: 7200px; }
.spacer { text-align:center }
</style>
<script>
jQuery(document).ready(function ($) {
"use strict";
$('#Default').perfectScrollbar();
$('#LongThumb').perfectScrollbar({minScrollbarLength:100});
});
</script>
</head>
<body>
<h1 style="text-align:center">No minimum</h1>
<div id="Default" class="contentHolder">
<div class="content">
</div>
</div>
<h1 style="text-align:center">100px minimum</h1>
<div id="LongThumb" class="contentHolder">
<div class="content">
</div>
</div>
</body>
</html>

14
src/perfect-scrollbar.js
View File

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