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

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 {