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

Merge pull request #48 from itsdrewmiller/master

Browse Source 
Add minScrollbarLength setting.
This commit is contained in:
Hyunje Alex Jun 2013-07-31 08:42:40 -07:00
commit 68032d168b
3 changed files with 52 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@ -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
})
```

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
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 {