Release 0.4.5.

Patch notes
1. AMD compatibility.
2. Add 'useBothWheelAxes' feature.
3. Implement keyboard scrolling.
4. Implement visible rails.

.csslintrc

@@ -0,0 +1,3 @@
+{
+  "adjoining-classes": false
+}

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+node_modules

.jshintignore

@@ -1,3 +0,0 @@
-examples
-min
-src/jquery.mousewheel.js

.jshintrc

@@ -1,66 +1,61 @@
 {
-    // Settings
-    "passfail"      : false,  // Stop on first error.
-    "maxerr"        : 100,    // Maximum error before stopping.
+    "passfail"      : false,
+    "maxerr"        : 100,
 
-    // Predefined globals whom JSHint will ignore.
-    "browser"       : true,  // Standard browser globals e.g. `window`, `document`.
+    "browser"       : true,
 
     "node"          : true,
     "rhino"         : false,
     "couch"         : false,
-    "wsh"           : false,  // Windows Scripting Host.
+    "wsh"           : false,
 
     "jquery"        : true,
     "prototypejs"   : false,
     "mootools"      : false,
     "dojo"          : false,
 
-    "predef"        : [  // Custom globals.
+    "predef"        : [
         "require",
         "define"
     ],
 
-    // Development.
-    "debug"         : false,  // Allow debugger statements e.g. browser breakpoints.
-    "devel"         : true,   // Allow developments statements e.g. `console.log();`.
+    "debug"         : false,
+    "devel"         : true,
 
-    // 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').
+    "strict"        : true,
+    "globalstrict"  : true,
 
-    // 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.
+    "asi"           : false,
+    "laxbreak"      : false,
+    "bitwise"       : true,
+    "boss"          : false,
+    "curly"         : true,
+    "eqeqeq"        : true,
+    "eqnull"        : false,
+    "evil"          : false,
+    "expr"          : false,
+    "forin"         : false,
+    "immed"         : true,
+    "latedef"       : true,
+    "loopfunc"      : false,
+    "noarg"         : true,
+    "regexp"        : true,
+    "regexdash"     : false,
+    "scripturl"     : true,
+    "shadow"        : false,
+    "supernew"      : false,
+    "undef"         : true,
 
-    // 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
+    "newcap"        : true,
+    "noempty"       : false,
+    "nonew"         : true,
+    "nomen"         : false,
+    "onevar"        : false,
+    "plusplus"      : false,
+    "sub"           : false,
+    "trailing"      : true,
+    "white"         : true,
+    "indent"        : 2,
+    "laxcomma"      : true,
+    "camelcase"     : true
 }

.travis.yml

@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "0.10"
+before_script:
+  - npm install -g grunt-cli

Gruntfile.js

@@ -0,0 +1,87 @@
+'use strict';
+
+module.exports = function (grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    // Metadata.
+    pkg: grunt.file.readJSON('perfect-scrollbar.jquery.json'),
+    version: grunt.file.readJSON('package.json').version,
+    banner: '/*! <%= pkg.title || pkg.name %> - v<%= version %>\n' +
+      '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
+      '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
+      ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
+    clean: {
+      files: ['min']
+    },
+    // Task configuration.
+    uglify: {
+      options: {
+        banner: '<%= banner %>'
+      },
+      min: {
+        files: {
+          'min/perfect-scrollbar-<%= version %>.min.js': ['src/perfect-scrollbar.js'],
+          'min/perfect-scrollbar-<%= version %>.with-mousewheel.min.js': [
+            'src/perfect-scrollbar.js',
+            'src/jquery.mousewheel.js'
+          ]
+        }
+      }
+    },
+    jshint: {
+      gruntfile: {
+        options: {
+          jshintrc: '.jshintrc'
+        },
+        src: 'Gruntfile.js'
+      },
+      src: {
+        options: {
+          jshintrc: '.jshintrc'
+        },
+        src: 'src/perfect-scrollbar.js'
+      }
+    },
+    csslint: {
+      strict: {
+        options: {
+          csslintrc: '.csslintrc',
+          'import': 2
+        },
+        src: ['src/perfect-scrollbar.css']
+      }
+    },
+    cssmin: {
+      options: {
+        banner: '<%= banner %>'
+      },
+      minify: {
+        expand: true,
+        cwd: 'src/',
+        src: ['perfect-scrollbar.css'],
+        dest: 'min/',
+        ext: '-<%= version %>.min.css'
+      }
+    }
+  });
+
+  // These plugins provide necessary tasks.
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-contrib-csslint');
+  grunt.loadNpmTasks('grunt-contrib-cssmin');
+
+  grunt.registerTask('default', 'List commands', function () {
+    grunt.log.writeln("");
+
+    grunt.log.writeln("Run 'grunt lint' to lint the source files");
+    grunt.log.writeln("Run 'grunt build' to minify the source files");
+  });
+
+  grunt.registerTask('lint', ['jshint', 'csslint']);
+  grunt.registerTask('build', ['clean', 'uglify', 'cssmin']);
+  grunt.registerTask('travis', ['lint']);
+
+};

README.md

@@ -41,10 +41,13 @@ Requirements
 
 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.
+
+The requirement below is for perfect-scrollbar <= 0.3.4
+
+* there must be the *one* content element(like div) for the container.
  
 Optional parameters
 -------------------
@@ -53,12 +56,23 @@ perfect-scrollbar supports optional parameters.
 
 ### wheelSpeed
 The scroll speed applied to mousewheel event.  
-Default: 10
+**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
+**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**
+
+### useBothWheelAxes
+When set to true, and only one (vertical or horizontal) scrollbar is visible then both vertical and horizontal scrolling will affect the scrollbar.  
+**Default: false**
+
+### useKeyboard
+When set to true, the scroll works with arrow keys on the keyboard. The element is scrolled only when the mouse cursor hovers the element.  
+**Default: true**
 
 How to Use
 ----------
@@ -82,7 +96,8 @@ With optional parameters:
 ```javascript
 $("#Demo").perfectScrollbar({
   wheelSpeed: 20,
-  wheelPropagation: true
+  wheelPropagation: true,
+  minScrollbarLength: 20
 })
 ```
 
@@ -101,6 +116,8 @@ $("#Demo").scrollTop(0);
 $("#Demo").perfectScrollbar('update');
 ```
 
+Also you can get the informations about how to use the plugin from example codes in the `examples` directory of the source tree.
+
 Very helpful friends
 --------------------
 
@@ -111,13 +128,27 @@ If you want to make this plugin's update function more responsive, [jquery-resiz
 Contribution
 ------------
 
+#### Please read [Contributing](https://github.com/noraesae/perfect-scrollbar/wiki/Contributing) in the wiki before making any contibution.
+
+
 I *really* welcome contributions! Please feel free to fork and issue pull requests when...
 
 * You have a very nice idea to improve this plugin!
 * You found a bug!
 * You're good at English and can help my bad English!
 
-Also you can just open issues, and I can look into them.
+For IE problems, please refer to [IE Support](https://github.com/noraesae/perfect-scrollbar#ie-support)
+
+IE Support
+----------
+
+This plugin supports old IE browsers in the **minimum** range. The plugin is tested in IEs >= IE6 and works(not well, but works).
+
+**But the project will not accept the patches to fix IE problems in IE 6/7/8.**
+
+From jQuery 2.0, jQuery also will not support IE 6/7/8. I also think that supporting old browsers really breaks the web development conventions.
+
+When old IEs should be supported, please fork the project and make patches personally.
 
 License
 -------

build

@@ -1,4 +0,0 @@
-#!/bin/sh
-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

examples/options-default.html

@@ -3,15 +3,15 @@
   <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>
+      <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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";

examples/options-minScrollbarLength.html

@@ -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</title>
+        <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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>

examples/options-useBothWheelAxes.html

@@ -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</title>
+        <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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-x { background-image: url('./azusa.jpg'); width: 1920px; height: 360px; }
+          .contentHolder .content-y { background-image: url('./azusa.jpg'); width: 640px; height: 1080px; }
+          .spacer { text-align:center; }
+        </style>
+    <script>
+      jQuery(document).ready(function ($) {
+        "use strict";
+        $('#Default').perfectScrollbar();
+        $('#CanScrollWithYAxis').perfectScrollbar({useBothWheelAxes: true});
+        $('#CanScrollWithXAxis').perfectScrollbar({useBothWheelAxes: true});
+      });
+    </script>
+  </head>
+  <body>
+    <h1 style="text-align:center">Default.</h1>
+    <div id="Default" class="contentHolder">
+      <div class="content-x">
+      </div>
+    </div>
+    <h1 style="text-align:center">Can scroll X axis with Y axis wheel.</h1>
+    <div id="CanScrollWithYAxis" class="contentHolder">
+      <div class="content-x">
+      </div>
+    </div>
+    <h1 style="text-align:center">Can scroll Y axis with X axis wheel.</h1>
+    <div id="CanScrollWithXAxis" class="contentHolder">
+      <div class="content-y">
+      </div>
+    </div>
+  </body>
+</html>

examples/options-wheelPropagation.html

@@ -2,16 +2,16 @@
 <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>
+    <title>perfect-scrollbar example</title>
+      <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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";

examples/options-wheelSpeed.html

@@ -2,16 +2,16 @@
 <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>
+    <title>perfect-scrollbar example</title>
+      <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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";

examples/text-content.html

@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+  <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.10.2/jquery.min.js"></script>
+    <script src="../src/jquery.mousewheel.js"></script>
+    <script src="../src/perfect-scrollbar.js"></script>
+    <style>
+      #description {
+        border: 1px solid gray;
+        height:150px;
+        width: 400px;
+        overflow: hidden;
+        position: absolute;
+      }
+    </style>
+    <script type="text/javascript">
+      $(document).ready(function ($) {
+        $('#description').perfectScrollbar({
+          wheelSpeed: 20,
+          wheelPropagation: false
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="description" class="wrapper">
+      <div>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+      </div>
+    </div>
+  </body>
+</html>

min/perfect-scrollbar-0.4.5.min.css

@@ -0,0 +1,5 @@
+/*! perfect-scrollbar - v0.4.5
+* http://noraesae.github.com/perfect-scrollbar/
+* Copyright (c) 2013 HyeonJe Jun; Licensed MIT */
+
+.ps-container .ps-scrollbar-x-rail{position:absolute;bottom:3px;height:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color.2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}.ps-container:hover .ps-scrollbar-x-rail,.ps-container.hover .ps-scrollbar-x-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x-rail:hover,.ps-container .ps-scrollbar-x-rail.hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-x-rail.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y-rail{position:absolute;right:3px;width:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color.2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}.ps-container:hover .ps-scrollbar-y-rail,.ps-container.hover .ps-scrollbar-y-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y-rail:hover,.ps-container .ps-scrollbar-y-rail.hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y-rail.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-x{position:absolute;bottom:0;height:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s linear}.ps-container.ie6 .ps-scrollbar-x{font-size:0}.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x{background-color:#999}.ps-container .ps-scrollbar-y{position:absolute;right:0;width:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s linear}.ps-container.ie .ps-scrollbar-y{font-size:0}.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y{background-color:#999}

min/perfect-scrollbar.min.css

@@ -1 +0,0 @@
-.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)}

package.json

@@ -0,0 +1,18 @@
+{
+  "name": "perfect-scrollbar",
+  "version": "0.4.5",
+  "engines": {
+    "node": ">= 0.8.0"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-jshint": "~0.1.1",
+    "grunt-contrib-uglify": "~0.1.1",
+    "grunt-contrib-cssmin": "~0.6.1",
+    "grunt-contrib-csslint": "~0.1.2",
+    "grunt-contrib-clean": "~0.4.1"
+  },
+  "scripts": {
+    "test": "grunt travis --verbose"
+  }
+}

perfect-scrollbar.jquery.json

@@ -2,7 +2,7 @@
   "name": "perfect-scrollbar",
   "title": "perfect-scrollbar",
   "description": "Tiny but perfect jquery scrollbar plugin.",
-  "version": "0.3.4",
+  "version": "0.4.5",
   "author": {
     "name": "HyeonJe Jun",
     "email": "noraesae@yuiazu.net",

src/perfect-scrollbar.css

@@ -1,61 +1,111 @@
-.ps-container .ps-scrollbar-x {
+.ps-container .ps-scrollbar-x-rail {
     position: absolute; /* please don't change 'position' */
-    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x */
+    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
     height: 8px;
-    background-color: #aaa;
-    border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
+    border-radius: 4px;
     opacity: 0;
     filter: alpha(opacity = 0);
-    -webkit-transition: opacity.2s linear;
-    -moz-transition: opacity .2s linear;
-    transition: opacity .2s linear;
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -webkit-transition: background-color.2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
 }
 
-.ps-container:hover .ps-scrollbar-x {
+.ps-container:hover .ps-scrollbar-x-rail,
+.ps-container.hover .ps-scrollbar-x-rail {
     opacity: 0.6;
     filter: alpha(opacity = 60);
 }
 
-.ps-container .ps-scrollbar-x:hover {
+.ps-container .ps-scrollbar-x-rail:hover,
+.ps-container .ps-scrollbar-x-rail.hover {
+    background-color: #eee;
     opacity: 0.9;
     filter: alpha(opacity = 90);
-    cursor:default;
 }
 
-.ps-container .ps-scrollbar-x.in-scrolling {
+.ps-container .ps-scrollbar-x-rail.in-scrolling {
     opacity: 0.9;
     filter: alpha(opacity = 90);
 }
 
+.ps-container .ps-scrollbar-y-rail {
+    position: absolute; /* please don't change 'position' */
+    right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 8px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    opacity: 0;
+    filter: alpha(opacity = 0);
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -webkit-transition: background-color.2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+}
+
+.ps-container:hover .ps-scrollbar-y-rail,
+.ps-container.hover .ps-scrollbar-y-rail {
+    opacity: 0.6;
+    filter: alpha(opacity = 60);
+}
+
+.ps-container .ps-scrollbar-y-rail:hover,
+.ps-container .ps-scrollbar-y-rail.hover {
+    background-color: #eee;
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-y-rail.in-scrolling {
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-x {
+    position: absolute; /* please don't change 'position' */
+    bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */
+    height: 8px;
+    background-color: #aaa;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -o-transition: background-color .2s linear;
+    -webkit-transition: background-color.2s linear;
+    -moz-transition: background-color .2s linear;
+    transition: background-color .2s linear;
+}
+
+.ps-container.ie6 .ps-scrollbar-x {
+    font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
+}
+
+.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,
+.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x {
+    background-color: #999;
+}
+
 .ps-container .ps-scrollbar-y {
     position: absolute; /* please don't change 'position' */
-    right: 3px; /* there must be 'right' for ps-scrollbar-y */
+    right: 0; /* there must be 'right' for ps-scrollbar-y */
     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;
+    border-radius: 4px;
+    -o-transition: background-color .2s linear;
+    -webkit-transition: background-color.2s linear;
+    -moz-transition: background-color .2s linear;
+    transition: background-color .2s linear;
 }
 
-.ps-container:hover .ps-scrollbar-y {
-    opacity: 0.6;
-    filter: alpha(opacity = 60);
+.ps-container.ie .ps-scrollbar-y {
+    font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
 }
 
-.ps-container .ps-scrollbar-y:hover {
-    opacity: 0.9;
-    filter: alpha(opacity = 90);
-    cursor: default;
-}
-
-.ps-container .ps-scrollbar-y.in-scrolling {
-    opacity: 0.9;
-    filter: alpha(opacity = 90);
+.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
+.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
+    background-color: #999;
 }

src/perfect-scrollbar.js

@@ -1,324 +1,594 @@
 /* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
  * Licensed under the MIT License
  */
-((function ($) {
+'use strict';
+(function (factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['jquery'], factory);
+  } else {
+    // Browser globals
+    factory(jQuery);
+  }
+}(function ($) {
 
   // The default settings for the plugin
   var defaultSettings = {
     wheelSpeed: 10,
-    wheelPropagation: false
+    wheelPropagation: false,
+    minScrollbarLength: null,
+    useBothWheelAxes: false,
+    useKeyboard: true
   };
 
   $.fn.perfectScrollbar = function (suppliedSettings, option) {
 
-    // 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;
-    }
+    return this.each(function () {
+      // Use the default settings
+      var settings = $.extend(true, {}, defaultSettings),
+          $this = $(this);
 
-    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);
-    }
-
-    if ($(this).data('perfect-scrollbar')) {
-      // if there's already perfect-scrollbar
-      return $(this).data('perfect-scrollbar');
-    }
-
-    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 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 (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;
       }
 
-      if (scrollbarYTop >= containerHeight - scrollbarYHeight) {
-        scrollbarYTop = containerHeight - scrollbarYHeight;
-      }
-      if (scrollbarXLeft >= containerWidth - scrollbarXWidth) {
-        scrollbarXLeft = containerWidth - scrollbarXWidth;
-      }
+      // Catch options
 
-      $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();
+      if (option === 'update') {
+        if ($this.data('perfect-scrollbar-update')) {
+          $this.data('perfect-scrollbar-update')();
         }
-      });
-
-      $(document).bind('mouseup.perfect-scroll', function (e) {
-        if ($scrollbarX.hasClass('in-scrolling')) {
-          $scrollbarX.removeClass('in-scrolling');
+        return $this;
+      }
+      else if (option === 'destroy') {
+        if ($this.data('perfect-scrollbar-destroy')) {
+          $this.data('perfect-scrollbar-destroy')();
         }
-      });
-    };
+        return $this;
+      }
 
-    var bindMouseScrollYHandler = function () {
-      var currentTop,
-          currentPageY;
+      if ($this.data('perfect-scrollbar')) {
+        // if there's already perfect-scrollbar
+        return $this.data('perfect-scrollbar');
+      }
 
-      $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();
-        }
-      });
+      // Or generate new perfectScrollbar
 
-      $(document).bind('mouseup.perfect-scroll', function (e) {
-        if ($scrollbarY.hasClass('in-scrolling')) {
-          $scrollbarY.removeClass('in-scrolling');
-        }
-      });
-    };
+      // Set class to the container
+      $this.addClass('ps-container');
 
-    // 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 $scrollbarXRail = $("<div class='ps-scrollbar-x-rail'></div>").appendTo($this),
+          $scrollbarYRail = $("<div class='ps-scrollbar-y-rail'></div>").appendTo($this),
+          $scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($scrollbarXRail),
+          $scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($scrollbarYRail),
+          scrollbarXActive,
+          scrollbarYActive,
+          containerWidth,
+          containerHeight,
+          contentWidth,
+          contentHeight,
+          scrollbarXWidth,
+          scrollbarXLeft,
+          scrollbarXBottom = parseInt($scrollbarXRail.css('bottom'), 10),
+          scrollbarYHeight,
+          scrollbarYTop,
+          scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10);
 
-        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;
+      var updateContentScrollTop = function () {
+        var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight), 10);
+        $this.scrollTop(scrollTop);
+        $scrollbarXRail.css({bottom: scrollbarXBottom - scrollTop});
       };
 
-      $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 updateContentScrollLeft = function () {
+        var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (containerWidth - scrollbarXWidth), 10);
+        $this.scrollLeft(scrollLeft);
+        $scrollbarYRail.css({right: scrollbarYRight - scrollLeft});
       };
 
-      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);
+      var getSettingsAdjustedThumbSize = function (thumbSize) {
+        if (settings.minScrollbarLength) {
+          thumbSize = Math.max(thumbSize, settings.minScrollbarLength);
         }
-      });
-      $this.bind("touchmove.perfect-scroll", function (e) {
-        var touch = e.originalEvent.targetTouches[0];
+        return thumbSize;
+      };
 
-        var currentCoords = {};
-        currentCoords.pageX = touch.pageX;
-        currentCoords.pageY = touch.pageY;
+      var updateScrollbarCss = function () {
+        $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth});
+        $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight});
+        $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth});
+        $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight});
+      };
 
-        var differenceX = currentCoords.pageX - startCoords.pageX,
-          differenceY = currentCoords.pageY - startCoords.pageY;
+      var updateBarSizeAndPosition = function () {
+        containerWidth = $this.width();
+        containerHeight = $this.height();
+        contentWidth = $this.prop('scrollWidth');
+        contentHeight = $this.prop('scrollHeight');
 
-        applyTouchMove(differenceX, differenceY);
-        startCoords = currentCoords;
+        if (containerWidth < contentWidth) {
+          scrollbarXActive = true;
+          scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(containerWidth * containerWidth / contentWidth, 10));
+          scrollbarXLeft = parseInt($this.scrollLeft() * (containerWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10);
+        }
+        else {
+          scrollbarXActive = false;
+          scrollbarXWidth = 0;
+          scrollbarXLeft = 0;
+          $this.scrollLeft(0);
+        }
 
-        var currentTime = (new Date()).getTime();
-        speed.x = differenceX / (currentTime - startTime);
-        speed.y = differenceY / (currentTime - startTime);
-        startTime = currentTime;
+        if (containerHeight < contentHeight) {
+          scrollbarYActive = true;
+          scrollbarYHeight = getSettingsAdjustedThumbSize(parseInt(containerHeight * containerHeight / contentHeight, 10));
+          scrollbarYTop = parseInt($this.scrollTop() * (containerHeight - scrollbarYHeight) / (contentHeight - containerHeight), 10);
+        }
+        else {
+          scrollbarYActive = false;
+          scrollbarYHeight = 0;
+          scrollbarYTop = 0;
+          $this.scrollTop(0);
+        }
 
-        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);
+        if (scrollbarYTop >= containerHeight - scrollbarYHeight) {
+          scrollbarYTop = containerHeight - scrollbarYHeight;
+        }
+        if (scrollbarXLeft >= containerWidth - scrollbarXWidth) {
+          scrollbarXLeft = containerWidth - scrollbarXWidth;
+        }
+
+        updateScrollbarCss();
+      };
+
+      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;
+        }
+        $scrollbarXRail.css({left: $this.scrollLeft()});
+        $scrollbarX.css({left: scrollbarXLeft});
+      };
+
+      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;
+        }
+        $scrollbarYRail.css({top: $this.scrollTop()});
+        $scrollbarY.css({top: scrollbarYTop});
+      };
+
+      var bindMouseScrollXHandler = function () {
+        var currentLeft,
+            currentPageX;
+
+        $scrollbarX.bind('mousedown.perfect-scrollbar', function (e) {
+          currentPageX = e.pageX;
+          currentLeft = $scrollbarX.position().left;
+          $scrollbarXRail.addClass('in-scrolling');
+          e.stopPropagation();
+          e.preventDefault();
+        });
+
+        $(document).bind('mousemove.perfect-scrollbar', function (e) {
+          if ($scrollbarXRail.hasClass('in-scrolling')) {
+            updateContentScrollLeft();
+            moveBarX(currentLeft, e.pageX - currentPageX);
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        });
+
+        $(document).bind('mouseup.perfect-scrollbar', function (e) {
+          if ($scrollbarXRail.hasClass('in-scrolling')) {
+            $scrollbarXRail.removeClass('in-scrolling');
+          }
+        });
+
+        currentLeft =
+        currentPageX = null;
+      };
+
+      var bindMouseScrollYHandler = function () {
+        var currentTop,
+            currentPageY;
+
+        $scrollbarY.bind('mousedown.perfect-scrollbar', function (e) {
+          currentPageY = e.pageY;
+          currentTop = $scrollbarY.position().top;
+          $scrollbarYRail.addClass('in-scrolling');
+          e.stopPropagation();
+          e.preventDefault();
+        });
+
+        $(document).bind('mousemove.perfect-scrollbar', function (e) {
+          if ($scrollbarYRail.hasClass('in-scrolling')) {
+            updateContentScrollTop();
+            moveBarY(currentTop, e.pageY - currentPageY);
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        });
+
+        $(document).bind('mouseup.perfect-scrollbar', function (e) {
+          if ($scrollbarYRail.hasClass('in-scrolling')) {
+            $scrollbarYRail.removeClass('in-scrolling');
+          }
+        });
+
+        currentTop =
+        currentPageY = null;
+      };
+
+      // 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;
+        };
+
+        var shouldPrevent = false;
+        $this.bind('mousewheel.perfect-scrollbar', function (e, delta, deltaX, deltaY) {
+          if (!settings.useBothWheelAxes) {
+            // deltaX will only be used for horizontal scrolling and deltaY will
+            // only be used for vertical scrolling - this is the default
+            $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+            $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
+          } else if (scrollbarYActive && !scrollbarXActive) {
+            // only vertical scrollbar is active and useBothWheelAxes option is
+            // active, so let's scroll vertical bar using both mouse wheel axes
+            if (deltaY) {
+              $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+            } else {
+              $this.scrollTop($this.scrollTop() + (deltaX * settings.wheelSpeed));
+            }
+          } else if (scrollbarXActive && !scrollbarYActive) {
+            // useBothWheelAxes and only horizontal bar is active, so use both
+            // wheel axes for horizontal bar
+            if (deltaX) {
+              $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
+            } else {
+              $this.scrollLeft($this.scrollLeft() - (deltaY * settings.wheelSpeed));
+            }
+          }
+
+          // update bar position
+          updateBarSizeAndPosition();
+
+          shouldPrevent = shouldPreventDefault(deltaX, deltaY);
+          if (shouldPrevent) {
+            e.preventDefault();
+          }
+        });
+
+        // fix Firefox scroll problem
+        $this.bind('MozMousePixelScroll.perfect-scrollbar', function (e) {
+          if (shouldPrevent) {
+            e.preventDefault();
+          }
+        });
+      };
+
+      var bindKeyboardHandler = function () {
+        var shouldPreventDefault = function (deltaX, deltaY) {
+          var scrollTop = $this.scrollTop();
+          if (scrollTop === 0 && deltaY > 0 && deltaX === 0) {
+            return false;
+          }
+          else if (scrollTop >= contentHeight - containerHeight && deltaY < 0 && deltaX === 0) {
+            return false;
+          }
+
+          var scrollLeft = $this.scrollLeft();
+          if (scrollLeft === 0 && deltaX < 0 && deltaY === 0) {
+            return false;
+          }
+          else if (scrollLeft >= contentWidth - containerWidth && deltaX > 0 && deltaY === 0) {
+            return false;
+          }
+          return true;
+        };
+
+        var hovered = false;
+        $this.bind('mouseenter.perfect-scrollbar', function (e) {
+          hovered = true;
+        });
+        $this.bind('mouseleave.perfect-scrollbar', function (e) {
+          hovered = false;
+        });
+
+        var shouldPrevent = false;
+        $(document).bind('keydown.perfect-scrollbar', function (e) {
+          if (!hovered) {
             return;
           }
 
-          applyTouchMove(speed.x * 30, speed.y * 30);
+          var deltaX = 0,
+              deltaY = 0;
 
-          speed.x *= 0.8;
-          speed.y *= 0.8;
-        }, 10);
-      });
-    };
+          switch (e.which) {
+          case 37: // left
+            deltaX = -3;
+            break;
+          case 38: // up
+            deltaY = 3;
+            break;
+          case 39: // right
+            deltaX = 3;
+            break;
+          case 40: // down
+            deltaY = -3;
+            break;
+          default:
+            return;
+          }
 
-    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);
-    };
+          $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+          $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
 
-    var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
+          // update bar position
+          updateBarSizeAndPosition();
 
-    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);
-    };
+          shouldPrevent = shouldPreventDefault(deltaX, deltaY);
+          if (shouldPrevent) {
+            e.preventDefault();
+          }
+        });
+      };
 
-    // initialize
-    initialize();
+      var bindRailClickHandler = function () {
+        var stopPropagation = function (e) { e.stopPropagation(); };
 
-    return $this;
+        $scrollbarY.bind('click.perfect-scrollbar', stopPropagation);
+        $scrollbarYRail.bind('click.perfect-scrollbar', function (e) {
+          var halfOfScrollbarLength = parseInt(scrollbarYHeight / 2, 10),
+              positionTop = e.pageY - $scrollbarYRail.offset().top - halfOfScrollbarLength,
+              maxPositionTop = containerHeight - scrollbarYHeight,
+              positionRatio = positionTop / maxPositionTop;
+
+          if (positionRatio < 0) {
+            positionRatio = 0;
+          } else if (positionRatio > 1) {
+            positionRatio = 1;
+          }
+
+          $this.scrollTop((contentHeight - containerHeight) * positionRatio);
+
+          // update bar position
+          updateBarSizeAndPosition();
+        });
+
+        $scrollbarX.bind('click.perfect-scrollbar', stopPropagation);
+        $scrollbarXRail.bind('click.perfect-scrollbar', function (e) {
+          var halfOfScrollbarLength = parseInt(scrollbarXWidth / 2, 10),
+              positionLeft = e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength,
+              maxPositionLeft = containerWidth - scrollbarXWidth,
+              positionRatio = positionLeft / maxPositionLeft;
+
+          if (positionRatio < 0) {
+            positionRatio = 0;
+          } else if (positionRatio > 1) {
+            positionRatio = 1;
+          }
+
+          $this.scrollLeft((contentWidth - containerWidth) * positionRatio);
+
+          // update bar position
+          updateBarSizeAndPosition();
+        });
+      };
+
+      // 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,
+            inGlobalTouch = false;
+
+        $(window).bind("touchstart.perfect-scrollbar", function (e) {
+          inGlobalTouch = true;
+        });
+        $(window).bind("touchend.perfect-scrollbar", function (e) {
+          inGlobalTouch = false;
+        });
+
+        $this.bind("touchstart.perfect-scrollbar", 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);
+          }
+
+          e.stopPropagation();
+        });
+        $this.bind("touchmove.perfect-scrollbar", function (e) {
+          if (!inGlobalTouch && e.originalEvent.targetTouches.length === 1) {
+            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-scrollbar", function (e) {
+          clearInterval(breakingProcess);
+          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 () {
+        $this.unbind('.perfect-scrollbar');
+        $(window).unbind('.perfect-scrollbar');
+        $(document).unbind('.perfect-scrollbar');
+        $this.data('perfect-scrollbar', null);
+        $this.data('perfect-scrollbar-update', null);
+        $this.data('perfect-scrollbar-destroy', null);
+        $scrollbarX.remove();
+        $scrollbarY.remove();
+        $scrollbarXRail.remove();
+        $scrollbarYRail.remove();
+
+        // clean all variables
+        $scrollbarX =
+        $scrollbarY =
+        containerWidth =
+        containerHeight =
+        contentWidth =
+        contentHeight =
+        scrollbarXWidth =
+        scrollbarXLeft =
+        scrollbarXBottom =
+        scrollbarYHeight =
+        scrollbarYTop =
+        scrollbarYRight = null;
+      };
+
+      var ieSupport = function (version) {
+        $this.addClass('ie').addClass('ie' + version);
+
+        var bindHoverHandlers = function () {
+          var mouseenter = function () {
+            $(this).addClass('hover');
+          };
+          var mouseleave = function () {
+            $(this).removeClass('hover');
+          };
+          $this.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
+          $scrollbarXRail.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
+          $scrollbarYRail.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
+          $scrollbarX.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
+          $scrollbarY.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
+        };
+
+        var fixIe6ScrollbarPosition = function () {
+          updateScrollbarCss = function () {
+            $scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft(), bottom: scrollbarXBottom, width: scrollbarXWidth});
+            $scrollbarY.css({top: scrollbarYTop + $this.scrollTop(), right: scrollbarYRight, height: scrollbarYHeight});
+            $scrollbarX.hide().show();
+            $scrollbarY.hide().show();
+          };
+          updateContentScrollTop = function () {
+            var scrollTop = parseInt(scrollbarYTop * contentHeight / containerHeight, 10);
+            $this.scrollTop(scrollTop);
+            $scrollbarX.css({bottom: scrollbarXBottom});
+            $scrollbarX.hide().show();
+          };
+          updateContentScrollLeft = function () {
+            var scrollLeft = parseInt(scrollbarXLeft * contentWidth / containerWidth, 10);
+            $this.scrollLeft(scrollLeft);
+            $scrollbarY.hide().show();
+          };
+        };
+
+        if (version === 6) {
+          bindHoverHandlers();
+          fixIe6ScrollbarPosition();
+        }
+      };
+
+      var supportsTouch = (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch);
+
+      var initialize = function () {
+        var ieMatch = navigator.userAgent.toLowerCase().match(/(msie) ([\w.]+)/);
+        if (ieMatch && ieMatch[1] === 'msie') {
+          // must be executed at first, because 'ieSupport' may addClass to the container
+          ieSupport(parseInt(ieMatch[2], 10));
+        }
+
+        updateBarSizeAndPosition();
+        bindMouseScrollXHandler();
+        bindMouseScrollYHandler();
+        bindRailClickHandler();
+        if (supportsTouch) {
+          bindMobileTouchHandler();
+        }
+        if ($this.mousewheel) {
+          bindMouseWheelHandler();
+        }
+        if (settings.useKeyboard) {
+          bindKeyboardHandler();
+        }
+        $this.data('perfect-scrollbar', $this);
+        $this.data('perfect-scrollbar-update', updateBarSizeAndPosition);
+        $this.data('perfect-scrollbar-destroy', destroy);
+      };
+
+      // initialize
+      initialize();
+
+      return $this;
+    });
   };
-})(jQuery));
+}));