Compare commits
28 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
c6c087275c | ||
|
|
4613c3daee | ||
|
|
667c61d2c3 | ||
|
|
4012ce9c8c | ||
|
|
9734a18d01 | ||
|
|
4f49b0fa7f | ||
|
|
9d6728e3ff | ||
|
|
69c37268a1 | ||
|
|
960468fc9e | ||
|
|
42d528a839 | ||
|
|
26e9ff1cac | ||
|
|
38b8b818e8 | ||
|
|
938f3134d7 | ||
|
|
aa213398f3 | ||
|
|
1cdbc9509f | ||
|
|
627b6a6b81 | ||
|
|
0099bb556c | ||
|
|
2e1e9f2f75 | ||
|
|
f3b6fd520c | ||
|
|
a6bb9d02a3 | ||
|
|
639f369d33 | ||
|
|
dacb601f9f | ||
|
|
0c9dc8dbb4 | ||
|
|
f32e32485b | ||
|
|
a4bee31597 | ||
|
|
bd9e96be12 | ||
|
|
1bd0c102db | ||
|
|
36ae8c4059 |
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.DS_Store
|
||||
3
.jshintignore
Normal file
3
.jshintignore
Normal file
@@ -0,0 +1,3 @@
|
||||
examples
|
||||
min
|
||||
src/jquery.mousewheel.js
|
||||
66
.jshintrc
Normal file
66
.jshintrc
Normal file
@@ -0,0 +1,66 @@
|
||||
{
|
||||
// Settings
|
||||
"passfail" : false, // Stop on first error.
|
||||
"maxerr" : 100, // Maximum error before stopping.
|
||||
|
||||
// Predefined globals whom JSHint will ignore.
|
||||
"browser" : true, // Standard browser globals e.g. `window`, `document`.
|
||||
|
||||
"node" : true,
|
||||
"rhino" : false,
|
||||
"couch" : false,
|
||||
"wsh" : false, // Windows Scripting Host.
|
||||
|
||||
"jquery" : true,
|
||||
"prototypejs" : false,
|
||||
"mootools" : false,
|
||||
"dojo" : false,
|
||||
|
||||
"predef" : [ // Custom globals.
|
||||
"require",
|
||||
"define"
|
||||
],
|
||||
|
||||
// Development.
|
||||
"debug" : false, // Allow debugger statements e.g. browser breakpoints.
|
||||
"devel" : true, // Allow developments statements e.g. `console.log();`.
|
||||
|
||||
// ECMAScript 5.
|
||||
"es5" : true, // Allow ECMAScript 5 syntax.
|
||||
"strict" : false, // Require `use strict` pragma in every file.
|
||||
"globalstrict" : true, // Allow global "use strict" (also enables 'strict').
|
||||
|
||||
// The Good Parts.
|
||||
"asi" : false, // Tolerate Automatic Semicolon Insertion (no semicolons).
|
||||
"laxbreak" : false, // Tolerate unsafe line breaks e.g. `return [\n] x` without semicolons.
|
||||
"bitwise" : true, // Prohibit bitwise operators (&, |, ^, etc.).
|
||||
"boss" : false, // Tolerate assignments inside if, for & while. Usually conditions & loops are for comparison, not assignments.
|
||||
"curly" : true, // Require {} for every new block or scope.
|
||||
"eqeqeq" : true, // Require triple equals i.e. `===`.
|
||||
"eqnull" : false, // Tolerate use of `== null`.
|
||||
"evil" : false, // Tolerate use of `eval`.
|
||||
"expr" : false, // Tolerate `ExpressionStatement` as Programs.
|
||||
"forin" : false, // Tolerate `for in` loops without `hasOwnPrototype`.
|
||||
"immed" : true, // Require immediate invocations to be wrapped in parens e.g. `( function(){}() );`
|
||||
"latedef" : true, // Prohipit variable use before definition.
|
||||
"loopfunc" : false, // Allow functions to be defined within loops.
|
||||
"noarg" : true, // Prohibit use of `arguments.caller` and `arguments.callee`.
|
||||
"regexp" : true, // Prohibit `.` and `[^...]` in regular expressions.
|
||||
"regexdash" : false, // Tolerate unescaped last dash i.e. `[-...]`.
|
||||
"scripturl" : true, // Tolerate script-targeted URLs.
|
||||
"shadow" : false, // Allows re-define variables later in code e.g. `var x=1; x=2;`.
|
||||
"supernew" : false, // Tolerate `new function () { ... };` and `new Object;`.
|
||||
"undef" : true, // Require all non-global variables be declared before they are used.
|
||||
|
||||
// Personal styling preferences.
|
||||
"newcap" : true, // Require capitalization of all constructor functions e.g. `new F()`.
|
||||
"noempty" : false, // Prohibit use of empty blocks.
|
||||
"nonew" : true, // Prohibit use of constructors for side-effects.
|
||||
"nomen" : false, // Prohibit use of initial or trailing underbars in names.
|
||||
"onevar" : false, // Allow only one `var` statement per function.
|
||||
"plusplus" : false, // Prohibit use of `++` & `--`.
|
||||
"sub" : false, // Tolerate all forms of subscript notation besides dot notation e.g. `dict['key']` instead of `dict.key`.
|
||||
"trailing" : true, // Prohibit trailing whitespaces.
|
||||
"white" : true, // Check against strict whitespace and indentation rules.
|
||||
"indent" : 2 // Specify indentation spacing
|
||||
}
|
||||
31
README.md
31
README.md
@@ -39,12 +39,26 @@ It's cool, isn't it?
|
||||
Requirements
|
||||
------------
|
||||
|
||||
To make this plugin *perfect*, some requirements was not avoidable. But they're all very trivial and there's nothing to worry.
|
||||
To make this plugin *perfect*, some requirements were not avoidable. But they're all very trivial and there's nothing to worry about.
|
||||
|
||||
* there must be the *one* content element(like div) for the container.
|
||||
* the container must have a 'position' css style.
|
||||
* the scrollbar's position must be 'absolute'.
|
||||
* the scrollbar-x must have a 'bottom' css style, and the scrollbar-y must have a 'right' css style.
|
||||
|
||||
Optional parameters
|
||||
-------------------
|
||||
|
||||
perfect-scrollbar supports optional parameters.
|
||||
|
||||
### wheelSpeed
|
||||
The scroll speed applied to mousewheel event.
|
||||
Default: 10
|
||||
|
||||
### wheelPropagation
|
||||
If this option is true, when the scroll reach the end of the side, mousewheel event will be propagated to parent element.
|
||||
Default: false
|
||||
|
||||
|
||||
How to Use
|
||||
----------
|
||||
@@ -63,6 +77,15 @@ When the html document is like above, just use like this:
|
||||
```javascript
|
||||
$('#Demo').perfectScrollbar();
|
||||
```
|
||||
|
||||
With optional parameters:
|
||||
```javascript
|
||||
$("#Demo").perfectScrollbar({
|
||||
wheelSpeed: 20,
|
||||
wheelPropagation: true
|
||||
})
|
||||
```
|
||||
|
||||
If the size of your container or content changes:
|
||||
```javascript
|
||||
$('#Demo').perfectScrollbar('update');
|
||||
@@ -72,6 +95,12 @@ If you want to destory the scrollbar:
|
||||
$('#Demo').perfectScrollbar('destroy');
|
||||
```
|
||||
|
||||
If you want to scroll to somewhere, just use scroll-top css and update.
|
||||
```javascript
|
||||
$("#Demo").scrollTop(0);
|
||||
$("#Demo").perfectScrollbar('update');
|
||||
```
|
||||
|
||||
Very helpful friends
|
||||
--------------------
|
||||
|
||||
|
||||
3
build
3
build
@@ -1,3 +1,4 @@
|
||||
#!/bin/sh
|
||||
uglifyjs src/perfect-scrollbar.js > min/perfect-scrollbar.min.js
|
||||
uglifyjs src/perfect-scrollbar.js -o min/perfect-scrollbar.min.js
|
||||
uglifyjs src/perfect-scrollbar.js src/jquery.mousewheel.js -o min/perfect-scrollbar.with-mousewheel.min.js
|
||||
cleancss src/perfect-scrollbar.css -o min/perfect-scrollbar.min.css
|
||||
|
||||
BIN
examples/azusa.jpg
Normal file
BIN
examples/azusa.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
29
examples/options-default.html
Normal file
29
examples/options-default.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!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</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: 600px; height: 400px; overflow: hidden; }
|
||||
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
||||
.spacer { text-align:center }
|
||||
</style>
|
||||
<script>
|
||||
jQuery(document).ready(function ($) {
|
||||
"use strict";
|
||||
$('#Default').perfectScrollbar();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="Default" class="contentHolder">
|
||||
<div class="content">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
40
examples/options-wheelPropagation.html
Normal file
40
examples/options-wheelPropagation.html
Normal file
@@ -0,0 +1,40 @@
|
||||
<!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 wheelPropagation to control propagation of scrolling at extremities</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: 600px; height: 400px; overflow: hidden; }
|
||||
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
||||
.spacer { text-align:center }
|
||||
</style>
|
||||
<script>
|
||||
jQuery(document).ready(function ($) {
|
||||
"use strict";
|
||||
$('#Default').perfectScrollbar();
|
||||
$('#NoWheelPropagation').perfectScrollbar({wheelPropagation:true});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 style="text-align:center">Default; wheelPropagation:false</h1>
|
||||
<div id="Default" class="contentHolder">
|
||||
<div class="content">
|
||||
</div>
|
||||
</div>
|
||||
<h1 style="text-align:center">wheelPropagation:true</h1>
|
||||
<div id="NoWheelPropagation" class="contentHolder">
|
||||
<div class="content">
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer">
|
||||
Note<br>that<br>there<br>is<br>plenty<br>of<br>text<br>after<br>the<br>image<br>to<br>ensure<br>that<br>it<br>is<br>possible<br>to<br>down<br>
|
||||
after<br>the<br>bottom<br>of<br>the<br>image<br>has<br>been<br>reached<br>to<br>enable<br>the<br>wheel<br>propagation<br>to<br>be<br>tested<br>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
42
examples/options-wheelSpeed.html
Normal file
42
examples/options-wheelSpeed.html
Normal file
@@ -0,0 +1,42 @@
|
||||
<!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: 600px; height: 400px; overflow: hidden; }
|
||||
.contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
|
||||
.spacer { text-align:center }
|
||||
</style>
|
||||
<script>
|
||||
jQuery(document).ready(function ($) {
|
||||
"use strict";
|
||||
$('#Default').perfectScrollbar();
|
||||
$('#FastWheelSpeed').perfectScrollbar({wheelSpeed:100});
|
||||
$('#SlowWheelSpeed').perfectScrollbar({wheelSpeed:1});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1 style="text-align:center">Default; wheelSpeed:10</h1>
|
||||
<div id="Default" class="contentHolder">
|
||||
<div class="content">
|
||||
</div>
|
||||
</div>
|
||||
<h1 style="text-align:center">Fast: wheelSpeed:100</h1>
|
||||
<div id="FastWheelSpeed" class="contentHolder">
|
||||
<div class="content">
|
||||
</div>
|
||||
</div>
|
||||
<h1 style="text-align:center">Slow: wheelSpeed:1</h1>
|
||||
<div id="SlowWheelSpeed" class="contentHolder">
|
||||
<div class="content">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
2
min/perfect-scrollbar.min.css
vendored
2
min/perfect-scrollbar.min.css
vendored
@@ -1 +1 @@
|
||||
.ps-container .ps-scrollbar-x{position:absolute;bottom:3px;height:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-x{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-x.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y{position:absolute;right:3px;width:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-y{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{opacity:.9;filter:alpha(opacity=90)}
|
||||
.ps-container .ps-scrollbar-x{position:absolute;bottom:3px;height:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-x{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-x.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y{position:absolute;right:3px;width:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-y{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{opacity:.9;filter:alpha(opacity=90)}
|
||||
4
min/perfect-scrollbar.min.js
vendored
4
min/perfect-scrollbar.min.js
vendored
File diff suppressed because one or more lines are too long
1
min/perfect-scrollbar.with-mousewheel.min.js
vendored
Normal file
1
min/perfect-scrollbar.with-mousewheel.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
37
perfect-scrollbar.jquery.json
Normal file
37
perfect-scrollbar.jquery.json
Normal file
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "perfect-scrollbar",
|
||||
"title": "perfect-scrollbar",
|
||||
"description": "Tiny but perfect jquery scrollbar plugin.",
|
||||
"version": "0.3.4",
|
||||
"author": {
|
||||
"name": "HyeonJe Jun",
|
||||
"email": "noraesae@yuiazu.net",
|
||||
"url": "https://github.com/noraesae/"
|
||||
},
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "https://github.com/noraesae/perfect-scrollbar#license"
|
||||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"jquery": ">=1.8"
|
||||
},
|
||||
"keywords": [
|
||||
"ui",
|
||||
"scroll",
|
||||
"scrollbar"
|
||||
],
|
||||
"homepage": "http://noraesae.github.com/perfect-scrollbar/",
|
||||
"docs": "https://github.com/noraesae/perfect-scrollbar/",
|
||||
"download": "http://noraesae.github.com/perfect-scrollbar/",
|
||||
"demo": "http://noraesae.github.com/perfect-scrollbar/",
|
||||
"bugs": "https://github.com/noraesae/perfect-scrollbar/issues/",
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "HyeonJe Jun",
|
||||
"email": "noraesae@yuiazu.net",
|
||||
"url": "https://github.com/noraesae/"
|
||||
}
|
||||
]
|
||||
}
|
||||
84
src/jquery.mousewheel.js
Normal file
84
src/jquery.mousewheel.js
Normal file
@@ -0,0 +1,84 @@
|
||||
/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
|
||||
* Licensed under the MIT License (LICENSE.txt).
|
||||
*
|
||||
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
||||
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
||||
* Thanks to: Seamus Leahy for adding deltaX and deltaY
|
||||
*
|
||||
* Version: 3.0.6
|
||||
*
|
||||
* Requires: 1.2.2+
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
var types = ['DOMMouseScroll', 'mousewheel'];
|
||||
|
||||
if ($.event.fixHooks) {
|
||||
for ( var i=types.length; i; ) {
|
||||
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
|
||||
}
|
||||
}
|
||||
|
||||
$.event.special.mousewheel = {
|
||||
setup: function() {
|
||||
if ( this.addEventListener ) {
|
||||
for ( var i=types.length; i; ) {
|
||||
this.addEventListener( types[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = handler;
|
||||
}
|
||||
},
|
||||
|
||||
teardown: function() {
|
||||
if ( this.removeEventListener ) {
|
||||
for ( var i=types.length; i; ) {
|
||||
this.removeEventListener( types[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.extend({
|
||||
mousewheel: function(fn) {
|
||||
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
|
||||
},
|
||||
|
||||
unmousewheel: function(fn) {
|
||||
return this.unbind("mousewheel", fn);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function handler(event) {
|
||||
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
|
||||
event = $.event.fix(orgEvent);
|
||||
event.type = "mousewheel";
|
||||
|
||||
// Old school scrollwheel delta
|
||||
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
|
||||
if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
|
||||
|
||||
// New school multidimensional scroll (touchpads) deltas
|
||||
deltaY = delta;
|
||||
|
||||
// Gecko
|
||||
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
|
||||
deltaY = 0;
|
||||
deltaX = -1*delta;
|
||||
}
|
||||
|
||||
// Webkit
|
||||
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
|
||||
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
|
||||
|
||||
// Add event and delta to the front of the arguments
|
||||
args.unshift(event, delta, deltaX, deltaY);
|
||||
|
||||
return ($.event.dispatch || $.event.handle).apply(this, args);
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
@@ -38,6 +38,7 @@
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
opacity: 0;
|
||||
filter: alpha(opacity = 0);
|
||||
-webkit-transition: opacity.2s linear;
|
||||
-moz-transition: opacity .2s linear;
|
||||
transition: opacity .2s linear;
|
||||
|
||||
@@ -1,206 +1,324 @@
|
||||
/* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
|
||||
* Licensed under the MIT License
|
||||
*/
|
||||
((function($) {
|
||||
$.fn.perfectScrollbar = function(option) {
|
||||
if(option === 'update') {
|
||||
if($(this).data('perfect_scrollbar_update')) {
|
||||
$(this).data('perfect_scrollbar_update')();
|
||||
}
|
||||
return $(this);
|
||||
}
|
||||
else if(option === 'destroy') {
|
||||
if($(this).data('perfect_scrollbar_destroy')) {
|
||||
$(this).data('perfect_scrollbar_destroy')();
|
||||
}
|
||||
return $(this);
|
||||
}
|
||||
((function ($) {
|
||||
|
||||
if($(this).data('perfect_scrollbar')) {
|
||||
// if there's already perfect_scrollbar
|
||||
return $(this).data('perfect_scrollbar');
|
||||
}
|
||||
// The default settings for the plugin
|
||||
var defaultSettings = {
|
||||
wheelSpeed: 10,
|
||||
wheelPropagation: false
|
||||
};
|
||||
|
||||
var $this = $(this).addClass('ps-container'),
|
||||
$content = $(this).children(),
|
||||
$scrollbar_x = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
|
||||
$scrollbar_y = $("<div class='ps-scrollbar-y'></div>").appendTo($this),
|
||||
container_width,
|
||||
container_height,
|
||||
content_width,
|
||||
content_height,
|
||||
scrollbar_x_width,
|
||||
scrollbar_x_left,
|
||||
scrollbar_x_bottom = parseInt($scrollbar_x.css('bottom')),
|
||||
scrollbar_y_height,
|
||||
scrollbar_y_top,
|
||||
scrollbar_y_right = parseInt($scrollbar_y.css('right'));
|
||||
$.fn.perfectScrollbar = function (suppliedSettings, option) {
|
||||
|
||||
var updateContentScrollTop = function() {
|
||||
var scroll_top = parseInt(scrollbar_y_top * content_height / container_height);
|
||||
$this.scrollTop(scroll_top);
|
||||
$scrollbar_x.css({bottom: scrollbar_x_bottom - scroll_top});
|
||||
};
|
||||
// Use the default settings
|
||||
var settings = $.extend(true, {}, defaultSettings);
|
||||
if (typeof suppliedSettings === "object") {
|
||||
// But over-ride any supplied
|
||||
$.extend(true, settings, suppliedSettings);
|
||||
} else {
|
||||
// If no settings were supplied, then the first param must be the option
|
||||
option = suppliedSettings;
|
||||
}
|
||||
|
||||
var updateContentScrollLeft = function() {
|
||||
var scroll_left = parseInt(scrollbar_x_left * content_width / container_width);
|
||||
$this.scrollLeft(scroll_left);
|
||||
$scrollbar_y.css({right: scrollbar_y_right - scroll_left});
|
||||
};
|
||||
if (option === 'update') {
|
||||
if ($(this).data('perfect-scrollbar-update')) {
|
||||
$(this).data('perfect-scrollbar-update')();
|
||||
}
|
||||
return $(this);
|
||||
}
|
||||
else if (option === 'destroy') {
|
||||
if ($(this).data('perfect-scrollbar-destroy')) {
|
||||
$(this).data('perfect-scrollbar-destroy')();
|
||||
}
|
||||
return $(this);
|
||||
}
|
||||
|
||||
var updateBarSizeAndPosition = function() {
|
||||
container_width = $this.width();
|
||||
container_height = $this.height();
|
||||
content_width = $content.width();
|
||||
content_height = $content.height();
|
||||
if(container_width < content_width) {
|
||||
scrollbar_x_width = parseInt(container_width * container_width / content_width);
|
||||
scrollbar_x_left = parseInt($this.scrollLeft() * container_width / content_width);
|
||||
}
|
||||
else {
|
||||
scrollbar_x_width = 0;
|
||||
scrollbar_x_left = 0;
|
||||
}
|
||||
if(container_height < content_height) {
|
||||
scrollbar_y_height = parseInt(container_height * container_height / content_height);
|
||||
scrollbar_y_top = parseInt($this.scrollTop() * container_height / content_height);
|
||||
}
|
||||
else {
|
||||
scrollbar_y_height = 0;
|
||||
scrollbar_y_left = 0;
|
||||
}
|
||||
if ($(this).data('perfect-scrollbar')) {
|
||||
// if there's already perfect-scrollbar
|
||||
return $(this).data('perfect-scrollbar');
|
||||
}
|
||||
|
||||
$scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft(), bottom: scrollbar_x_bottom - $this.scrollTop(), width: scrollbar_x_width});
|
||||
$scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop(), right: scrollbar_y_right - $this.scrollLeft(), height: scrollbar_y_height});
|
||||
};
|
||||
var $this = $(this).addClass('ps-container'),
|
||||
$content = $(this).children(),
|
||||
$scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
|
||||
$scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($this),
|
||||
containerWidth,
|
||||
containerHeight,
|
||||
contentWidth,
|
||||
contentHeight,
|
||||
scrollbarXWidth,
|
||||
scrollbarXLeft,
|
||||
scrollbarXBottom = parseInt($scrollbarX.css('bottom'), 10),
|
||||
scrollbarYHeight,
|
||||
scrollbarYTop,
|
||||
scrollbarYRight = parseInt($scrollbarY.css('right'), 10);
|
||||
|
||||
var moveBarX = function(current_left, delta_x) {
|
||||
var new_left = current_left + delta_x,
|
||||
max_left = container_width - scrollbar_x_width;
|
||||
|
||||
if(new_left < 0) {
|
||||
scrollbar_x_left = 0;
|
||||
}
|
||||
else if(new_left > max_left) {
|
||||
scrollbar_x_left = max_left;
|
||||
}
|
||||
else {
|
||||
scrollbar_x_left = new_left;
|
||||
}
|
||||
$scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft()});
|
||||
}
|
||||
|
||||
var moveBarY = function(current_top, delta_y) {
|
||||
var new_top = current_top + delta_y,
|
||||
max_top = container_height - scrollbar_y_height;
|
||||
|
||||
if(new_top < 0) {
|
||||
scrollbar_y_top = 0;
|
||||
}
|
||||
else if(new_top > max_top) {
|
||||
scrollbar_y_top = max_top;
|
||||
}
|
||||
else {
|
||||
scrollbar_y_top = new_top;
|
||||
}
|
||||
$scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop()});
|
||||
};
|
||||
|
||||
var bindMouseScrollXHandler = function() {
|
||||
var current_left,
|
||||
current_page_x;
|
||||
|
||||
$scrollbar_x.bind('mousedown.perfect-scroll', function(e) {
|
||||
current_page_x = e.pageX;
|
||||
current_left = $scrollbar_x.position().left;
|
||||
$scrollbar_x.addClass('in-scrolling');
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$(window).bind('mousemove.perfect-scroll', function(e) {
|
||||
if($scrollbar_x.hasClass('in-scrolling')) {
|
||||
moveBarX(current_left, e.pageX - current_page_x);
|
||||
updateContentScrollLeft();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
$(window).bind('mouseup.perfect-scroll', function(e) {
|
||||
if($scrollbar_x.hasClass('in-scrolling')) {
|
||||
$scrollbar_x.removeClass('in-scrolling');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var bindMouseScrollYHandler = function() {
|
||||
var current_top,
|
||||
current_page_y;
|
||||
|
||||
$scrollbar_y.bind('mousedown.perfect-scroll', function(e) {
|
||||
current_page_y = e.pageY;
|
||||
current_top = $scrollbar_y.position().top;
|
||||
$scrollbar_y.addClass('in-scrolling');
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$(window).bind('mousemove.perfect-scroll', function(e) {
|
||||
if($scrollbar_y.hasClass('in-scrolling')) {
|
||||
moveBarY(current_top, e.pageY - current_page_y);
|
||||
updateContentScrollTop();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
$(window).bind('mouseup.perfect-scroll', function(e) {
|
||||
if($scrollbar_y.hasClass('in-scrolling')) {
|
||||
$scrollbar_y.removeClass('in-scrolling');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// bind handlers
|
||||
var bindMouseWheelHandler = function() {
|
||||
$this.mousewheel(function(e, delta, deltaX, deltaY) {
|
||||
$this.scrollTop($this.scrollTop() - (deltaY * 10));
|
||||
$this.scrollLeft($this.scrollLeft() + (deltaX * 10));
|
||||
|
||||
// update bar position
|
||||
updateBarSizeAndPosition();
|
||||
|
||||
if(content_height > container_height || content_width > container_width) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var destroy = function() {
|
||||
$scrollbar_x.remove();
|
||||
$scrollbar_y.remove();
|
||||
$this.unbind('mousewheel');
|
||||
$(window).unbind('mousemove.perfect-scroll');
|
||||
$(window).unbind('mouseup.perfect-scroll');
|
||||
$this.data('perfect_scrollbar', null);
|
||||
$this.data('perfect_scrollbar_update', null);
|
||||
$this.data('perfect_scrollbar_destroy', null);
|
||||
};
|
||||
|
||||
var initialize = function() {
|
||||
updateBarSizeAndPosition();
|
||||
bindMouseScrollXHandler();
|
||||
bindMouseScrollYHandler();
|
||||
if($this.mousewheel) bindMouseWheelHandler();
|
||||
$this.data('perfect_scrollbar', $this);
|
||||
$this.data('perfect_scrollbar_update', updateBarSizeAndPosition);
|
||||
$this.data('perfect_scrollbar_destroy', destroy);
|
||||
};
|
||||
|
||||
// initialize
|
||||
initialize();
|
||||
|
||||
return $this;
|
||||
var updateContentScrollTop = function () {
|
||||
var scrollTop = parseInt(scrollbarYTop * contentHeight / containerHeight, 10);
|
||||
$this.scrollTop(scrollTop);
|
||||
$scrollbarX.css({bottom: scrollbarXBottom - scrollTop});
|
||||
};
|
||||
|
||||
var updateContentScrollLeft = function () {
|
||||
var scrollLeft = parseInt(scrollbarXLeft * contentWidth / containerWidth, 10);
|
||||
$this.scrollLeft(scrollLeft);
|
||||
$scrollbarY.css({right: scrollbarYRight - scrollLeft});
|
||||
};
|
||||
|
||||
var updateBarSizeAndPosition = function () {
|
||||
containerWidth = $this.width();
|
||||
containerHeight = $this.height();
|
||||
contentWidth = $content.outerWidth(false);
|
||||
contentHeight = $content.outerHeight(false);
|
||||
if (containerWidth < contentWidth) {
|
||||
scrollbarXWidth = parseInt(containerWidth * containerWidth / contentWidth, 10);
|
||||
scrollbarXLeft = parseInt($this.scrollLeft() * containerWidth / contentWidth, 10);
|
||||
}
|
||||
else {
|
||||
scrollbarXWidth = 0;
|
||||
scrollbarXLeft = 0;
|
||||
$this.scrollLeft(0);
|
||||
}
|
||||
if (containerHeight < contentHeight) {
|
||||
scrollbarYHeight = parseInt(containerHeight * containerHeight / contentHeight, 10);
|
||||
scrollbarYTop = parseInt($this.scrollTop() * containerHeight / contentHeight, 10);
|
||||
}
|
||||
else {
|
||||
scrollbarYHeight = 0;
|
||||
scrollbarYTop = 0;
|
||||
$this.scrollTop(0);
|
||||
}
|
||||
|
||||
if (scrollbarYTop >= containerHeight - scrollbarYHeight) {
|
||||
scrollbarYTop = containerHeight - scrollbarYHeight;
|
||||
}
|
||||
if (scrollbarXLeft >= containerWidth - scrollbarXWidth) {
|
||||
scrollbarXLeft = containerWidth - 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});
|
||||
};
|
||||
|
||||
var moveBarX = function (currentLeft, deltaX) {
|
||||
var newLeft = currentLeft + deltaX,
|
||||
maxLeft = containerWidth - scrollbarXWidth;
|
||||
|
||||
if (newLeft < 0) {
|
||||
scrollbarXLeft = 0;
|
||||
}
|
||||
else if (newLeft > maxLeft) {
|
||||
scrollbarXLeft = maxLeft;
|
||||
}
|
||||
else {
|
||||
scrollbarXLeft = newLeft;
|
||||
}
|
||||
$scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft()});
|
||||
};
|
||||
|
||||
var moveBarY = function (currentTop, deltaY) {
|
||||
var newTop = currentTop + deltaY,
|
||||
maxTop = containerHeight - scrollbarYHeight;
|
||||
|
||||
if (newTop < 0) {
|
||||
scrollbarYTop = 0;
|
||||
}
|
||||
else if (newTop > maxTop) {
|
||||
scrollbarYTop = maxTop;
|
||||
}
|
||||
else {
|
||||
scrollbarYTop = newTop;
|
||||
}
|
||||
$scrollbarY.css({top: scrollbarYTop + $this.scrollTop()});
|
||||
};
|
||||
|
||||
var bindMouseScrollXHandler = function () {
|
||||
var currentLeft,
|
||||
currentPageX;
|
||||
|
||||
$scrollbarX.bind('mousedown.perfect-scroll', function (e) {
|
||||
currentPageX = e.pageX;
|
||||
currentLeft = $scrollbarX.position().left;
|
||||
$scrollbarX.addClass('in-scrolling');
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$(document).bind('mousemove.perfect-scroll', function (e) {
|
||||
if ($scrollbarX.hasClass('in-scrolling')) {
|
||||
moveBarX(currentLeft, e.pageX - currentPageX);
|
||||
updateContentScrollLeft();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).bind('mouseup.perfect-scroll', function (e) {
|
||||
if ($scrollbarX.hasClass('in-scrolling')) {
|
||||
$scrollbarX.removeClass('in-scrolling');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var bindMouseScrollYHandler = function () {
|
||||
var currentTop,
|
||||
currentPageY;
|
||||
|
||||
$scrollbarY.bind('mousedown.perfect-scroll', function (e) {
|
||||
currentPageY = e.pageY;
|
||||
currentTop = $scrollbarY.position().top;
|
||||
$scrollbarY.addClass('in-scrolling');
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
$(document).bind('mousemove.perfect-scroll', function (e) {
|
||||
if ($scrollbarY.hasClass('in-scrolling')) {
|
||||
moveBarY(currentTop, e.pageY - currentPageY);
|
||||
updateContentScrollTop();
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
$(document).bind('mouseup.perfect-scroll', function (e) {
|
||||
if ($scrollbarY.hasClass('in-scrolling')) {
|
||||
$scrollbarY.removeClass('in-scrolling');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// bind handlers
|
||||
var bindMouseWheelHandler = function () {
|
||||
var shouldPreventDefault = function (deltaX, deltaY) {
|
||||
var scrollTop = $this.scrollTop();
|
||||
if (scrollTop === 0 && deltaY > 0 && deltaX === 0) {
|
||||
return !settings.wheelPropagation;
|
||||
}
|
||||
else if (scrollTop >= contentHeight - containerHeight && deltaY < 0 && deltaX === 0) {
|
||||
return !settings.wheelPropagation;
|
||||
}
|
||||
|
||||
var scrollLeft = $this.scrollLeft();
|
||||
if (scrollLeft === 0 && deltaX < 0 && deltaY === 0) {
|
||||
return !settings.wheelPropagation;
|
||||
}
|
||||
else if (scrollLeft >= contentWidth - containerWidth && deltaX > 0 && deltaY === 0) {
|
||||
return !settings.wheelPropagation;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
$this.mousewheel(function (e, delta, deltaX, deltaY) {
|
||||
$this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
|
||||
$this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
|
||||
|
||||
// update bar position
|
||||
updateBarSizeAndPosition();
|
||||
|
||||
if (shouldPreventDefault(deltaX, deltaY)) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// bind mobile touch handler
|
||||
var bindMobileTouchHandler = function () {
|
||||
var applyTouchMove = function (differenceX, differenceY) {
|
||||
$this.scrollTop($this.scrollTop() - differenceY);
|
||||
$this.scrollLeft($this.scrollLeft() - differenceX);
|
||||
|
||||
// update bar position
|
||||
updateBarSizeAndPosition();
|
||||
};
|
||||
|
||||
var startCoords = {},
|
||||
startTime = 0,
|
||||
speed = {},
|
||||
breakingProcess = null;
|
||||
|
||||
$this.bind("touchstart.perfect-scroll", function (e) {
|
||||
var touch = e.originalEvent.targetTouches[0];
|
||||
|
||||
startCoords.pageX = touch.pageX;
|
||||
startCoords.pageY = touch.pageY;
|
||||
|
||||
startTime = (new Date()).getTime();
|
||||
|
||||
if (breakingProcess !== null) {
|
||||
clearInterval(breakingProcess);
|
||||
}
|
||||
});
|
||||
$this.bind("touchmove.perfect-scroll", function (e) {
|
||||
var touch = e.originalEvent.targetTouches[0];
|
||||
|
||||
var currentCoords = {};
|
||||
currentCoords.pageX = touch.pageX;
|
||||
currentCoords.pageY = touch.pageY;
|
||||
|
||||
var differenceX = currentCoords.pageX - startCoords.pageX,
|
||||
differenceY = currentCoords.pageY - startCoords.pageY;
|
||||
|
||||
applyTouchMove(differenceX, differenceY);
|
||||
startCoords = currentCoords;
|
||||
|
||||
var currentTime = (new Date()).getTime();
|
||||
speed.x = differenceX / (currentTime - startTime);
|
||||
speed.y = differenceY / (currentTime - startTime);
|
||||
startTime = currentTime;
|
||||
|
||||
e.preventDefault();
|
||||
});
|
||||
$this.bind("touchend.perfect-scroll", function (e) {
|
||||
breakingProcess = setInterval(function () {
|
||||
if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
|
||||
clearInterval(breakingProcess);
|
||||
return;
|
||||
}
|
||||
|
||||
applyTouchMove(speed.x * 30, speed.y * 30);
|
||||
|
||||
speed.x *= 0.8;
|
||||
speed.y *= 0.8;
|
||||
}, 10);
|
||||
});
|
||||
};
|
||||
|
||||
var destroy = function () {
|
||||
$scrollbarX.remove();
|
||||
$scrollbarY.remove();
|
||||
$this.unbind('mousewheel');
|
||||
$this.unbind('touchstart.perfect-scroll');
|
||||
$this.unbind('touchmove.perfect-scroll');
|
||||
$this.unbind('touchend.perfect-scroll');
|
||||
$(window).unbind('mousemove.perfect-scroll');
|
||||
$(window).unbind('mouseup.perfect-scroll');
|
||||
$this.data('perfect-scrollbar', null);
|
||||
$this.data('perfect-scrollbar-update', null);
|
||||
$this.data('perfect-scrollbar-destroy', null);
|
||||
};
|
||||
|
||||
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
|
||||
|
||||
var initialize = function () {
|
||||
updateBarSizeAndPosition();
|
||||
bindMouseScrollXHandler();
|
||||
bindMouseScrollYHandler();
|
||||
if (isMobile) {
|
||||
bindMobileTouchHandler();
|
||||
}
|
||||
if ($this.mousewheel) {
|
||||
bindMouseWheelHandler();
|
||||
}
|
||||
$this.data('perfect-scrollbar', $this);
|
||||
$this.data('perfect-scrollbar-update', updateBarSizeAndPosition);
|
||||
$this.data('perfect-scrollbar-destroy', destroy);
|
||||
};
|
||||
|
||||
// initialize
|
||||
initialize();
|
||||
|
||||
return $this;
|
||||
};
|
||||
})(jQuery));
|
||||
|
||||
Reference in New Issue
Block a user