minScrollbarLength setting
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:
parent
68c297fe2c
commit
ab2a018c93
@ -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
35
examples/options-minScrollbarLength.html
Normal 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>
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user