Release 0.4.10.

1. Add opposite-sided scrollbar feature 2. RTL support 3. Bug fixes
Add missing variables when cleaned.
2014-04-27 11:49:33 +01:00 · 2014-04-27 11:43:21 +01:00 · 2014-04-27 11:41:14 +01:00 · 2014-04-27 11:01:11 +01:00 · 2014-04-25 22:00:29 +01:00 · 2014-04-10 23:39:49 +01:00
29 changed files with 1566 additions and 459 deletions
--- a/.csslintrc
+++ b/.csslintrc
@@ -0,0 +1,3 @@
+{
+  "adjoining-classes": false
+}
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
 .DS_Store
+node_modules
+bower_components
--- a/.jshintrc
+++ b/.jshintrc
@@ -0,0 +1,61 @@
+{
+    "passfail"      : false,
+    "maxerr"        : 100,
+
+    "browser"       : true,
+
+    "node"          : true,
+    "rhino"         : false,
+    "couch"         : false,
+    "wsh"           : false,
+
+    "jquery"        : true,
+    "prototypejs"   : false,
+    "mootools"      : false,
+    "dojo"          : false,
+
+    "predef"        : [
+        "require",
+        "define"
+    ],
+
+    "debug"         : false,
+    "devel"         : true,
+
+    "strict"        : true,
+    "globalstrict"  : false,
+
+    "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,
+
+    "newcap"        : true,
+    "noempty"       : false,
+    "nonew"         : true,
+    "nomen"         : false,
+    "onevar"        : false,
+    "plusplus"      : false,
+    "sub"           : false,
+    "trailing"      : true,
+    "white"         : true,
+    "indent"        : 2,
+    "laxcomma"      : true,
+    "camelcase"     : true
+}
--- a/.travis.yml
+++ b/.travis.yml
@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "0.10"
+before_script:
+  - npm install -g grunt-cli
--- a/Gruntfile.js
+++ b/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']);
+
+};
--- a/README.md
+++ b/README.md
@@ -6,14 +6,14 @@ Tiny but perfect jQuery scrollbar plugin
 Why perfect-scrollbar?
 ------------------

-I worked on the personal project recently, and I was trying to find the jQuery scrollbar plugin that's *perfect*. But there was no *perfect* scrollbar plugin. That's why I decided to make one.
+I worked on a personal project recently, and I was trying to find the jQuery scrollbar plugin that's *perfect*. But there was no *perfect* scrollbar plugin. That's why I decided to make one.

-perfect-scrollbar is very tiny but *perfect*(for me, and maybe for the most of developers) jQuery scrollbar plugin.  
+perfect-scrollbar is very tiny but *perfect* (for me, and maybe for the most of developers) jQuery scrollbar plugin.  
 I hope you love this!

 Demo: http://noraesae.github.com/perfect-scrollbar/

-What means *perfect*?
+What does *perfect* mean?
 ---------------------

 *perfect* means...
@@ -36,15 +36,37 @@ Yes! the only thing that's not *perfect* is my English.

 It's cool, isn't it?

+Install
+-------
+
+You can download the latest stable version with download links in [Github Page](http://noraesae.github.io/perfect-scrollbar/). You also can find all releases in [Releases](https://github.com/noraesae/perfect-scrollbar/releases) page.
+
+If you want to use the development version of the plugin, use the source files which are not minified. They're in the `src` directory. The development version may be unstable, but some known bugs can be fixed.
+
+```
+git clone https://github.com/noraesae/perfect-scrollbar.git
+cd perfect-scrollbar/src
+```
+
+You can use [Bower](http://bower.io/) to install the plugin. The plugin is registered as `perfect-scrollbar`.
+
+```
+bower install perfect-scrollbar
+```
+
 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 container must have an 'overflow:hidden' 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 &lt;= 0.3.4
+
+* there must be the *one* content element(like div) for the container.
 
 Optional parameters
 -------------------
@@ -53,12 +75,43 @@ 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**
+
+### suppressScrollX
+When set to true, the scroll bar in X axis will not be available, regardless of the content width.  
+**Default: false**
+
+### suppressScrollY
+When set to true, the scroll bar in Y axis will not be available, regardless of the content height.  
+**Default: false**
+
+### scrollXMarginOffset
+The number of pixels the content width can surpass the container width without enabling the X axis scroll bar. Allows some "wiggle room" or "offset break", so that X axis scroll bar is not enabled just because of a few pixels.  
+**Default: 0**
+
+### scrollYMarginOffset
+The number of pixels the content height can surpass the container height without enabling the Y axis scroll bar. Allows some "wiggle room" or "offset break", so that Y axis scroll bar is not enabled just because of a few pixels.  
+**Default: 0**
+
+### includePadding
+When set to true, it uses `innerWidth` and `innerHeight` for the container size instead of `width` and `height`. When your container element has non-zero padding and the scrollbar layout looks weird, this option can be helpful.  
+**Default: false**

 How to Use
 ----------
@@ -82,7 +135,8 @@ With optional parameters:
 ```javascript
 $("#Demo").perfectScrollbar({
  wheelSpeed: 20,
-  wheelPropagation: true
+  wheelPropagation: true,
+  minScrollbarLength: 20
 })
 ```

@@ -101,6 +155,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,29 +167,40 @@ 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.
+
+Helpdesk
+--------
+
+If you have any idea to improve this project or any problem using this, please feel free to upload an [issue](https://github.com/noraesae/perfect-scrollbar/issues).

 License
 -------

-The MIT License (MIT) Copyright (c) 2012 HyeonJe Jun.
+The MIT License (MIT) Copyright (c) 2012, 2014 Hyeonje Alex Jun and other contributors.

 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-**It means, you can freely fork and modify this project for commercial or non-comercial use!**
-
-Helpdesk
--------
-
-If you have any idea to improve this project or any problems using this, please feel free to contact me.  
-Email: noraesae@yuiazu.net
--- a/bower.json
+++ b/bower.json
@@ -0,0 +1,25 @@
+{
+  "name": "perfect-scrollbar",
+  "version": "0.4.10",
+  "homepage": "http://noraesae.github.io/perfect-scrollbar/",
+  "authors": [
+    "Hyeonje Alex Jun <noraesae@yuiazu.net>"
+  ],
+  "description": "Tiny but perfect jQuery scrollbar plugin",
+  "main": [
+    "min/perfect-scrollbar-0.4.10.min.css",
+    "min/perfect-scrollbar-0.4.10.min.js",
+    "min/perfect-scrollbar-0.4.10.with-mousewheel.min.js"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": "2.x"
+  }
+}
--- a/4
+++ b/4
@@ -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
--- a/examples/options-default.html
+++ b/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";
--- a/examples/options-minScrollbarLength.html
+++ b/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>
--- a/examples/options-suppressScrollAxis.html
+++ b/examples/options-suppressScrollAxis.html
@@ -0,0 +1,43 @@
+<!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: 600px; height: 400px; overflow: hidden; }
+        .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+        .spacer { text-align:center }
+        h2 { text-align: center; }
+      </style>
+    <script>
+      jQuery(document).ready(function ($) {
+        "use strict";
+        $('#Default').perfectScrollbar();
+        $('#SuppressScrollX').perfectScrollbar({suppressScrollX: true});
+        $('#SuppressScrollY').perfectScrollbar({suppressScrollY: true});
+      });
+    </script>
+  </head>
+  <body>
+    <h2>Default</h2>
+    <div id="Default" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <h2>suppressScrollX: true</h2>
+    <div id="SuppressScrollX" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <h2>suppressScrollY: true</h2>
+    <div id="SuppressScrollY" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+  </body>
+</html>
+
--- a/examples/options-useBothWheelAxes.html
+++ b/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>
--- a/examples/options-wheelPropagation.html
+++ b/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";
--- a/examples/options-wheelSpeed.html
+++ b/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";
--- a/examples/reach-the-end-callback.html
+++ b/examples/reach-the-end-callback.html
@@ -0,0 +1,57 @@
+<!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: relative;
+      }
+      #status {
+        color: red;
+      }
+    </style>
+    <script type="text/javascript">
+      $(document).ready(function ($) {
+        var $container = $('#description');
+        var $status = $('#status');
+        $container.perfectScrollbar();
+        $container.scroll(function(e) {
+          if($container.scrollTop() === 0) {
+            $status.text('it reaches the top!');
+          }
+          else if ($container.scrollTop() === $container.prop('scrollHeight') - $container.height()) {
+            $status.text('it reaches the end!');
+          } else {
+            $status.text('');
+          }
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="description" class="wrapper">
+      <p>Hello, world! 0</p>
+      <p>Hello, world! 1</p>
+      <p>Hello, world! 2</p>
+      <p>Hello, world! 3</p>
+      <p>Hello, world! 4</p>
+      <p>Hello, world! 5</p>
+      <p>Hello, world! 6</p>
+      <p>Hello, world! 7</p>
+      <p>Hello, world! 8</p>
+      <p>Hello, world! 9</p>
+    </div>
+    <div id="status">
+    </div>
+  </body>
+</html>
--- a/examples/rtl.html
+++ b/examples/rtl.html
@@ -0,0 +1,30 @@
+<!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: 600px; height: 400px; overflow: hidden; }
+        .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+        .spacer { text-align:center }
+
+        html { direction: rtl; }
+      </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>
--- a/examples/scrollbars-on-the-opposite-side.html
+++ b/examples/scrollbars-on-the-opposite-side.html
@@ -0,0 +1,39 @@
+<!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: 600px; height: 400px; overflow: hidden; }
+        .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+        .spacer { text-align:center }
+
+        /* Change the alignment of scrollbars */
+        /* Recommended: You can just modify the CSS file directly. */
+        .ps-container .ps-scrollbar-x-rail {
+          top: 3px;
+          bottom: auto; /* If using `top`, there shouldn't be a `bottom`. */
+        }
+        .ps-container .ps-scrollbar-y-rail {
+          left: 3px;
+          right: auto; /* If using `left`, there shouldn't be a `right`. */
+        }
+      </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>
--- a/examples/text-content.html
+++ b/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>
--- a/min/perfect-scrollbar-0.4.10.min.css
+++ b/min/perfect-scrollbar-0.4.10.min.css
@@ -0,0 +1,5 @@
+/*! perfect-scrollbar - v0.4.10
+* http://noraesae.github.com/perfect-scrollbar/
+* Copyright (c) 2014 Hyeonje Alex 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{background-color:#eee;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{background-color:#eee;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.ie6 .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}.ps-container.ie .ps-scrollbar-x,.ps-container.ie .ps-scrollbar-y{visibility:hidden}.ps-container.ie:hover .ps-scrollbar-x,.ps-container.ie:hover .ps-scrollbar-y,.ps-container.ie.hover .ps-scrollbar-x,.ps-container.ie.hover .ps-scrollbar-y{visibility:visible}
--- a/min/perfect-scrollbar-0.4.10.min.js
+++ b/min/perfect-scrollbar-0.4.10.min.js
--- a/min/perfect-scrollbar-0.4.10.with-mousewheel.min.js
+++ b/min/perfect-scrollbar-0.4.10.with-mousewheel.min.js
--- a/min/perfect-scrollbar.min.css
+++ b/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)}
--- a/min/perfect-scrollbar.min.js
+++ b/min/perfect-scrollbar.min.js
--- a/min/perfect-scrollbar.with-mousewheel.min.js
+++ b/min/perfect-scrollbar.with-mousewheel.min.js
--- a/package.json
+++ b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "perfect-scrollbar",
+  "version": "0.4.10",
+  "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"
+  }
+}
--- a/perfect-scrollbar.jquery.json
+++ b/perfect-scrollbar.jquery.json
@@ -2,9 +2,9 @@
  "name": "perfect-scrollbar",
  "title": "perfect-scrollbar",
  "description": "Tiny but perfect jquery scrollbar plugin.",
-  "version": "0.3.2",
+  "version": "0.4.10",
  "author": {
-    "name": "HyeonJe Jun",
+    "name": "Hyeonje Alex Jun",
    "email": "noraesae@yuiazu.net",
    "url": "https://github.com/noraesae/"
  },
@@ -29,7 +29,7 @@
  "bugs": "https://github.com/noraesae/perfect-scrollbar/issues/",
  "maintainers": [
    {
-      "name": "HyeonJe Jun",
+      "name": "Hyeonje Alex Jun",
      "email": "noraesae@yuiazu.net",
      "url": "https://github.com/noraesae/"
    }
--- a/src/jquery.mousewheel.js
+++ b/src/jquery.mousewheel.js
@@ -1,84 +1,201 @@
-/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+/*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh)
 * 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.1.9
 *
- * Version: 3.0.6
- * 
- * Requires: 1.2.2+
+ * Requires: jQuery 1.2.2+
 */

-(function($) {
-
-var types = ['DOMMouseScroll', 'mousewheel'];
-
-if ($.event.fixHooks) {
-    for ( var i=types.length; i; ) {
-        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+(function (factory) {
+    if ( typeof define === 'function' && define.amd ) {
+        // AMD. Register as an anonymous module.
+        define(['jquery'], factory);
+    } else if (typeof exports === 'object') {
+        // Node/CommonJS style for Browserify
+        module.exports = factory;
+    } else {
+        // Browser globals
+        factory(jQuery);
    }
-}
+}(function ($) {

-$.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;
+    var toFix  = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'],
+        toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ?
+                    ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'],
+        slice  = Array.prototype.slice,
+        nullLowestDeltaTimeout, lowestDelta;
+
+    if ( $.event.fixHooks ) {
+        for ( var i = toFix.length; i; ) {
+            $.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
        }
    }
-};

-$.fn.extend({
-    mousewheel: function(fn) {
-        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
-    },
-    
-    unmousewheel: function(fn) {
-        return this.unbind("mousewheel", fn);
+    var special = $.event.special.mousewheel = {
+        version: '3.1.9',
+
+        setup: function() {
+            if ( this.addEventListener ) {
+                for ( var i = toBind.length; i; ) {
+                    this.addEventListener( toBind[--i], handler, false );
+                }
+            } else {
+                this.onmousewheel = handler;
+            }
+            // Store the line height and page height for this particular element
+            $.data(this, 'mousewheel-line-height', special.getLineHeight(this));
+            $.data(this, 'mousewheel-page-height', special.getPageHeight(this));
+        },
+
+        teardown: function() {
+            if ( this.removeEventListener ) {
+                for ( var i = toBind.length; i; ) {
+                    this.removeEventListener( toBind[--i], handler, false );
+                }
+            } else {
+                this.onmousewheel = null;
+            }
+        },
+
+        getLineHeight: function(elem) {
+            return parseInt($(elem)['offsetParent' in $.fn ? 'offsetParent' : 'parent']().css('fontSize'), 10);
+        },
+
+        getPageHeight: function(elem) {
+            return $(elem).height();
+        },
+
+        settings: {
+            adjustOldDeltas: true
+        }
+    };
+
+    $.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,
+            deltaX     = 0,
+            deltaY     = 0,
+            absDelta   = 0;
+        event = $.event.fix(orgEvent);
+        event.type = 'mousewheel';
+
+        // Old school scrollwheel delta
+        if ( 'detail'      in orgEvent ) { deltaY = orgEvent.detail * -1;      }
+        if ( 'wheelDelta'  in orgEvent ) { deltaY = orgEvent.wheelDelta;       }
+        if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY;      }
+        if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; }
+
+        // Firefox < 17 horizontal scrolling related to DOMMouseScroll event
+        if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+            deltaX = deltaY * -1;
+            deltaY = 0;
+        }
+
+        // Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy
+        delta = deltaY === 0 ? deltaX : deltaY;
+
+        // New school wheel delta (wheel event)
+        if ( 'deltaY' in orgEvent ) {
+            deltaY = orgEvent.deltaY * -1;
+            delta  = deltaY;
+        }
+        if ( 'deltaX' in orgEvent ) {
+            deltaX = orgEvent.deltaX;
+            if ( deltaY === 0 ) { delta  = deltaX * -1; }
+        }
+
+        // No change actually happened, no reason to go any further
+        if ( deltaY === 0 && deltaX === 0 ) { return; }
+
+        // Need to convert lines and pages to pixels if we aren't already in pixels
+        // There are three delta modes:
+        //   * deltaMode 0 is by pixels, nothing to do
+        //   * deltaMode 1 is by lines
+        //   * deltaMode 2 is by pages
+        if ( orgEvent.deltaMode === 1 ) {
+            var lineHeight = $.data(this, 'mousewheel-line-height');
+            delta  *= lineHeight;
+            deltaY *= lineHeight;
+            deltaX *= lineHeight;
+        } else if ( orgEvent.deltaMode === 2 ) {
+            var pageHeight = $.data(this, 'mousewheel-page-height');
+            delta  *= pageHeight;
+            deltaY *= pageHeight;
+            deltaX *= pageHeight;
+        }
+
+        // Store lowest absolute delta to normalize the delta values
+        absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) );
+
+        if ( !lowestDelta || absDelta < lowestDelta ) {
+            lowestDelta = absDelta;
+
+            // Adjust older deltas if necessary
+            if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
+                lowestDelta /= 40;
+            }
+        }
+
+        // Adjust older deltas if necessary
+        if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) {
+            // Divide all the things by 40!
+            delta  /= 40;
+            deltaX /= 40;
+            deltaY /= 40;
+        }
+
+        // Get a whole, normalized value for the deltas
+        delta  = Math[ delta  >= 1 ? 'floor' : 'ceil' ](delta  / lowestDelta);
+        deltaX = Math[ deltaX >= 1 ? 'floor' : 'ceil' ](deltaX / lowestDelta);
+        deltaY = Math[ deltaY >= 1 ? 'floor' : 'ceil' ](deltaY / lowestDelta);
+
+        // Add information to the event object
+        event.deltaX = deltaX;
+        event.deltaY = deltaY;
+        event.deltaFactor = lowestDelta;
+        // Go ahead and set deltaMode to 0 since we converted to pixels
+        // Although this is a little odd since we overwrite the deltaX/Y
+        // properties with normalized deltas.
+        event.deltaMode = 0;
+
+        // Add event and delta to the front of the arguments
+        args.unshift(event, delta, deltaX, deltaY);
+
+        // Clearout lowestDelta after sometime to better
+        // handle multiple device types that give different
+        // a different lowestDelta
+        // Ex: trackpad = 3 and mouse wheel = 120
+        if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); }
+        nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200);
+
+        return ($.event.dispatch || $.event.handle).apply(this, args);
    }
-});

-
-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;
+    function nullLowestDelta() {
+        lowestDelta = null;
    }
-    
-    // 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);
+    function shouldAdjustOldDeltas(orgEvent, absDelta) {
+        // If this is an older event and the delta is divisable by 120,
+        // then we are assuming that the browser is treating this as an
+        // older mouse wheel event and that we should divide the deltas
+        // by 40 to try and get a more usable deltaFactor.
+        // Side note, this actually impacts the reported scroll distance
+        // in older browsers and can cause scrolling to be slower than native.
+        // Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false.
+        return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0;
+    }
+
+}));
--- a/src/perfect-scrollbar.css
+++ b/src/perfect-scrollbar.css
@@ -1,61 +1,125 @@
-.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 {
+    background-color: #eee;
    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 {
+    background-color: #eee;
+    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.ie6 .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-rail:hover .ps-scrollbar-y,
+.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
+    background-color: #999;
 }

-.ps-container .ps-scrollbar-y.in-scrolling {
-    opacity: 0.9;
-    filter: alpha(opacity = 90);
+.ps-container.ie .ps-scrollbar-x,
+.ps-container.ie .ps-scrollbar-y {
+    visibility: hidden;
+}
+
+.ps-container.ie:hover .ps-scrollbar-x,
+.ps-container.ie:hover .ps-scrollbar-y,
+.ps-container.ie.hover .ps-scrollbar-x,
+.ps-container.ie.hover .ps-scrollbar-y {
+    visibility: visible;
 }
--- a/src/perfect-scrollbar.js
+++ b/src/perfect-scrollbar.js
@@ -1,313 +1,674 @@
-/* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
+/* Copyright (c) 2012, 2014 Hyeonje Alex Jun and other contributors
 * Licensed under the MIT License
 */
-((function($) {
+(function (factory) {
+  'use strict';

-    // The default settings for the plugin
-    var defaultSettings = {
-        wheelSpeed: 10,
-        wheelPropagation: false
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['jquery'], factory);
+  } else if (typeof exports === 'object') {
+    // Node/CommonJS
+    factory(require('jquery'));
+  } else {
+    // Browser globals
+    factory(jQuery);
+  }
+}(function ($) {
+  'use strict';
+
+  // The default settings for the plugin
+  var defaultSettings = {
+    wheelSpeed: 10,
+    wheelPropagation: false,
+    minScrollbarLength: null,
+    useBothWheelAxes: false,
+    useKeyboard: true,
+    suppressScrollX: false,
+    suppressScrollY: false,
+    scrollXMarginOffset: 0,
+    scrollYMarginOffset: 0,
+    includePadding: false
+  };
+
+  var getEventClassName = (function () {
+    var incrementingId = 0;
+    return function () {
+      var id = incrementingId;
+      incrementingId += 1;
+      return '.perfect-scrollbar-' + id;
    };
+  }());

-    $.fn.perfectScrollbar = function(suppliedSettings, option) {
+  $.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 (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;
+      }
+
+      // Catch options
+
+      if (option === 'update') {
+        if ($this.data('perfect-scrollbar-update')) {
+          $this.data('perfect-scrollbar-update')();
        }
-
-        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(),
-            $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'));
-
-        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});
-        };
-
-        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});
-        };
-
-        var updateBarSizeAndPosition = function() {
-            container_width = $this.width();
-            container_height = $this.height();
-            content_width = $content.outerWidth(false);
-            content_height = $content.outerHeight(false);
-            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;
-                $this.scrollLeft(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;
-                $this.scrollTop(0);
-            }
-
-            $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 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();
-            });
-
-            $(document).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();
-                }
-            });
-
-            $(document).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();
-            });
-
-            $(document).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();
-                }
-            });
-
-            $(document).bind('mouseup.perfect-scroll', function(e) {
-                if($scrollbar_y.hasClass('in-scrolling')) {
-                    $scrollbar_y.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 >= content_height - container_height && deltaY < 0 && deltaX == 0) {
-                    return !settings["wheelPropagation"];
-                }
-
-                var scrollLeft = $this.scrollLeft();
-                if(scrollLeft == 0 && deltaX < 0 && deltaY == 0) {
-                    return !settings["wheelPropagation"];
-                }
-                else if(scrollLeft >= content_width - container_width && 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(difference_x, difference_y) {
-                $this.scrollTop($this.scrollTop() - difference_y);
-                $this.scrollLeft($this.scrollLeft() - difference_x);
-
-                // update bar position
-                updateBarSizeAndPosition();
-            };
-
-            var start_coords = {},
-                start_time = 0,
-                speed = {},
-                breaking_process = null;
-
-            $this.bind("touchstart.perfect-scroll", function(e) {
-                var touch = e.originalEvent.targetTouches[0];
-
-                start_coords.pageX = touch.pageX;
-                start_coords.pageY = touch.pageY;
-
-                start_time = (new Date()).getTime();
-
-                if (breaking_process !== null) {
-                    clearInterval(breaking_process);
-                }
-            });
-            $this.bind("touchmove.perfect-scroll", function(e) {
-                var touch = e.originalEvent.targetTouches[0];
-
-                var current_coords = {};
-                current_coords.pageX = touch.pageX;
-                current_coords.pageY = touch.pageY;
-
-                var difference_x = current_coords.pageX - start_coords.pageX,
-                    difference_y = current_coords.pageY - start_coords.pageY;
-
-                applyTouchMove(difference_x, difference_y);
-                start_coords = current_coords;
-
-                var current_time = (new Date()).getTime();
-                speed.x = difference_x / (current_time - start_time);
-                speed.y = difference_y / (current_time - start_time);
-                start_time = current_time;
-
-                e.preventDefault();
-            });
-            $this.bind("touchend.perfect-scroll", function(e) {
-                breaking_process = setInterval(function() {
-                    if(Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
-                        clearInterval(breaking_process);
-                        return;
-                    }
-
-                    applyTouchMove(speed.x * 30, speed.y * 30);
-
-                    speed.x *= 0.8;
-                    speed.y *= 0.8;
-                }, 10);
-            });
-        };
-
-        var destroy = function() {
-            $scrollbar_x.remove();
-            $scrollbar_y.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));
+      }
+      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');
+      }
+
+
+      // Or generate new perfectScrollbar
+
+      // Set class to the container
+      $this.addClass('ps-container');
+
+      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),
+          isScrollbarXUsingBottom = scrollbarXBottom === scrollbarXBottom, // !isNaN
+          scrollbarXTop = isScrollbarXUsingBottom ? null : parseInt($scrollbarXRail.css('top'), 10),
+          scrollbarYHeight,
+          scrollbarYTop,
+          scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10),
+          isScrollbarYUsingRight = scrollbarYRight === scrollbarYRight, // !isNaN
+          scrollbarYLeft = isScrollbarYUsingRight ? null: parseInt($scrollbarYRail.css('left'), 10),
+          isRtl = $this.css('direction') === "rtl",
+          eventClassName = getEventClassName();
+
+      var updateContentScrollTop = function (currentTop, deltaY) {
+        var newTop = currentTop + deltaY,
+            maxTop = containerHeight - scrollbarYHeight;
+
+        if (newTop < 0) {
+          scrollbarYTop = 0;
+        }
+        else if (newTop > maxTop) {
+          scrollbarYTop = maxTop;
+        }
+        else {
+          scrollbarYTop = newTop;
+        }
+
+        var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight), 10);
+        $this.scrollTop(scrollTop);
+
+        if (isScrollbarXUsingBottom) {
+          $scrollbarXRail.css({bottom: scrollbarXBottom - scrollTop});
+        } else {
+          $scrollbarXRail.css({top: scrollbarXTop + scrollTop});
+        }
+      };
+
+      var updateContentScrollLeft = function (currentLeft, deltaX) {
+        var newLeft = currentLeft + deltaX,
+            maxLeft = containerWidth - scrollbarXWidth;
+
+        if (newLeft < 0) {
+          scrollbarXLeft = 0;
+        }
+        else if (newLeft > maxLeft) {
+          scrollbarXLeft = maxLeft;
+        }
+        else {
+          scrollbarXLeft = newLeft;
+        }
+
+        var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (containerWidth - scrollbarXWidth), 10);
+        $this.scrollLeft(scrollLeft);
+
+        if (isScrollbarYUsingRight) {
+          $scrollbarYRail.css({right: scrollbarYRight - scrollLeft});
+        } else {
+          $scrollbarYRail.css({left: scrollbarYLeft + scrollLeft});
+        }
+      };
+
+      var getSettingsAdjustedThumbSize = function (thumbSize) {
+        if (settings.minScrollbarLength) {
+          thumbSize = Math.max(thumbSize, settings.minScrollbarLength);
+        }
+        return thumbSize;
+      };
+
+      var updateScrollbarCss = function () {
+        var scrollbarXStyles = {width: containerWidth, display: scrollbarXActive ? "inherit": "none"};
+        if (isRtl) {
+          scrollbarXStyles.left = $this.scrollLeft() + containerWidth - contentWidth;
+        } else {
+          scrollbarXStyles.left = $this.scrollLeft();
+        }
+        if (isScrollbarXUsingBottom) {
+          scrollbarXStyles.bottom = scrollbarXBottom - $this.scrollTop();
+        } else {
+          scrollbarXStyles.top = scrollbarXTop + $this.scrollTop();
+        }
+        $scrollbarXRail.css(scrollbarXStyles);
+
+        var scrollbarYStyles = {top: $this.scrollTop(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"};
+
+        if (isScrollbarYUsingRight) {
+          if (isRtl) {
+            scrollbarYStyles.right = contentWidth - $this.scrollLeft() - scrollbarYRight - $scrollbarY.outerWidth();
+          } else {
+            scrollbarYStyles.right = scrollbarYRight - $this.scrollLeft();
+          }
+        } else {
+          if (isRtl) {
+            scrollbarYStyles.left = $this.scrollLeft() + containerWidth * 2 - contentWidth - scrollbarYLeft - $scrollbarY.outerWidth();
+          } else {
+            scrollbarYStyles.left = scrollbarYLeft + $this.scrollLeft();
+          }
+        }
+        $scrollbarYRail.css(scrollbarYStyles);
+
+        $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth});
+        $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight});
+      };
+
+      var updateBarSizeAndPosition = function () {
+        containerWidth = settings.includePadding ? $this.innerWidth() : $this.width();
+        containerHeight = settings.includePadding ? $this.innerHeight() : $this.height();
+        contentWidth = $this.prop('scrollWidth');
+        contentHeight = $this.prop('scrollHeight');
+
+        if (!settings.suppressScrollX && containerWidth + settings.scrollXMarginOffset < 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);
+        }
+
+        if (!settings.suppressScrollY && containerHeight + settings.scrollYMarginOffset < 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);
+        }
+
+        if (scrollbarYTop >= containerHeight - scrollbarYHeight) {
+          scrollbarYTop = containerHeight - scrollbarYHeight;
+        }
+        if (scrollbarXLeft >= containerWidth - scrollbarXWidth) {
+          scrollbarXLeft = containerWidth - scrollbarXWidth;
+        }
+
+        updateScrollbarCss();
+      };
+
+      var bindMouseScrollXHandler = function () {
+        var currentLeft,
+            currentPageX;
+
+        $scrollbarX.bind('mousedown' + eventClassName, function (e) {
+          currentPageX = e.pageX;
+          currentLeft = $scrollbarX.position().left;
+          $scrollbarXRail.addClass('in-scrolling');
+          e.stopPropagation();
+          e.preventDefault();
+        });
+
+        $(document).bind('mousemove' + eventClassName, function (e) {
+          if ($scrollbarXRail.hasClass('in-scrolling')) {
+            updateContentScrollLeft(currentLeft, e.pageX - currentPageX);
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        });
+
+        $(document).bind('mouseup' + eventClassName, function (e) {
+          if ($scrollbarXRail.hasClass('in-scrolling')) {
+            $scrollbarXRail.removeClass('in-scrolling');
+          }
+        });
+
+        currentLeft =
+        currentPageX = null;
+      };
+
+      var bindMouseScrollYHandler = function () {
+        var currentTop,
+            currentPageY;
+
+        $scrollbarY.bind('mousedown' + eventClassName, function (e) {
+          currentPageY = e.pageY;
+          currentTop = $scrollbarY.position().top;
+          $scrollbarYRail.addClass('in-scrolling');
+          e.stopPropagation();
+          e.preventDefault();
+        });
+
+        $(document).bind('mousemove' + eventClassName, function (e) {
+          if ($scrollbarYRail.hasClass('in-scrolling')) {
+            updateContentScrollTop(currentTop, e.pageY - currentPageY);
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        });
+
+        $(document).bind('mouseup' + eventClassName, function (e) {
+          if ($scrollbarYRail.hasClass('in-scrolling')) {
+            $scrollbarYRail.removeClass('in-scrolling');
+          }
+        });
+
+        currentTop =
+        currentPageY = null;
+      };
+
+      // check if the default scrolling should be prevented.
+      var shouldPreventDefault = function (deltaX, deltaY) {
+        var scrollTop = $this.scrollTop();
+        if (deltaX === 0) {
+          if (!scrollbarYActive) {
+            return false;
+          }
+          if ((scrollTop === 0 && deltaY > 0) || (scrollTop >= contentHeight - containerHeight && deltaY < 0)) {
+            return !settings.wheelPropagation;
+          }
+        }
+
+        var scrollLeft = $this.scrollLeft();
+        if (deltaY === 0) {
+          if (!scrollbarXActive) {
+            return false;
+          }
+          if ((scrollLeft === 0 && deltaX < 0) || (scrollLeft >= contentWidth - containerWidth && deltaX > 0)) {
+            return !settings.wheelPropagation;
+          }
+        }
+        return true;
+      };
+
+      // bind handlers
+      var bindMouseWheelHandler = function () {
+        // FIXME: Backward compatibility.
+        // After e.deltaFactor applied, wheelSpeed should have smaller value.
+        // Currently, there's no way to change the settings after the scrollbar initialized.
+        // But if the way is implemented in the future, wheelSpeed should be reset.
+        settings.wheelSpeed /= 10;
+
+        var shouldPrevent = false;
+        $this.bind('mousewheel' + eventClassName, function (e, deprecatedDelta, deprecatedDeltaX, deprecatedDeltaY) {
+          var deltaX = e.deltaX * e.deltaFactor || deprecatedDeltaX,
+              deltaY = e.deltaY * e.deltaFactor || deprecatedDeltaY;
+
+          shouldPrevent = false;
+          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));
+            }
+            shouldPrevent = true;
+          } 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));
+            }
+            shouldPrevent = true;
+          }
+
+          // update bar position
+          updateBarSizeAndPosition();
+
+          shouldPrevent = (shouldPrevent || shouldPreventDefault(deltaX, deltaY));
+          if (shouldPrevent) {
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        });
+
+        // fix Firefox scroll problem
+        $this.bind('MozMousePixelScroll' + eventClassName, function (e) {
+          if (shouldPrevent) {
+            e.preventDefault();
+          }
+        });
+      };
+
+      var bindKeyboardHandler = function () {
+        var hovered = false;
+        $this.bind('mouseenter' + eventClassName, function (e) {
+          hovered = true;
+        });
+        $this.bind('mouseleave' + eventClassName, function (e) {
+          hovered = false;
+        });
+
+        var shouldPrevent = false;
+        $(document).bind('keydown' + eventClassName, function (e) {
+          if (!hovered || $(document.activeElement).is(":input,[contenteditable]")) {
+            return;
+          }
+
+          var deltaX = 0,
+              deltaY = 0;
+
+          switch (e.which) {
+          case 37: // left
+            deltaX = -30;
+            break;
+          case 38: // up
+            deltaY = 30;
+            break;
+          case 39: // right
+            deltaX = 30;
+            break;
+          case 40: // down
+            deltaY = -30;
+            break;
+          case 33: // page up
+            deltaY = 90;
+            break;
+          case 32: // space bar
+          case 34: // page down
+            deltaY = -90;
+            break;
+          case 35: // end
+            deltaY = -containerHeight;
+            break;
+          case 36: // home
+            deltaY = containerHeight;
+            break;
+          default:
+            return;
+          }
+
+          $this.scrollTop($this.scrollTop() - deltaY);
+          $this.scrollLeft($this.scrollLeft() + deltaX);
+
+          shouldPrevent = shouldPreventDefault(deltaX, deltaY);
+          if (shouldPrevent) {
+            e.preventDefault();
+          }
+        });
+      };
+
+      var bindRailClickHandler = function () {
+        var stopPropagation = function (e) { e.stopPropagation(); };
+
+        $scrollbarY.bind('click' + eventClassName, stopPropagation);
+        $scrollbarYRail.bind('click' + eventClassName, 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);
+        });
+
+        $scrollbarX.bind('click' + eventClassName, stopPropagation);
+        $scrollbarXRail.bind('click' + eventClassName, 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);
+        });
+      };
+
+      // 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" + eventClassName, function (e) {
+          inGlobalTouch = true;
+        });
+        $(window).bind("touchend" + eventClassName, function (e) {
+          inGlobalTouch = false;
+        });
+
+        $this.bind("touchstart" + eventClassName, 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" + eventClassName, 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();
+
+            var timeGap = currentTime - startTime;
+            if (timeGap > 0) {
+              speed.x = differenceX / timeGap;
+              speed.y = differenceY / timeGap;
+              startTime = currentTime;
+            }
+
+            e.preventDefault();
+          }
+        });
+        $this.bind("touchend" + eventClassName, 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 bindScrollHandler = function () {
+        $this.bind('scroll' + eventClassName, function (e) {
+          updateBarSizeAndPosition();
+        });
+      };
+
+      var destroy = function () {
+        $this.unbind(eventClassName);
+        $(window).unbind(eventClassName);
+        $(document).unbind(eventClassName);
+        $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
+        $scrollbarXRail =
+        $scrollbarYRail =
+        $scrollbarX =
+        $scrollbarY =
+        scrollbarXActive =
+        scrollbarYActive =
+        containerWidth =
+        containerHeight =
+        contentWidth =
+        contentHeight =
+        scrollbarXWidth =
+        scrollbarXLeft =
+        scrollbarXBottom =
+        isScrollbarXUsingBottom =
+        scrollbarXTop =
+        scrollbarYHeight =
+        scrollbarYTop =
+        scrollbarYRight =
+        isScrollbarYUsingRight =
+        scrollbarYLeft =
+        isRtl =
+        eventClassName = 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' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+          $scrollbarXRail.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+          $scrollbarYRail.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+          $scrollbarX.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+          $scrollbarY.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+        };
+
+        var fixIe6ScrollbarPosition = function () {
+          updateScrollbarCss = function () {
+            var scrollbarXStyles = {left: scrollbarXLeft + $this.scrollLeft(), width: scrollbarXWidth};
+            if (isScrollbarXUsingBottom) {
+              scrollbarXStyles.bottom = scrollbarXBottom;
+            } else {
+              scrollbarXStyles.top = scrollbarXTop;
+            }
+            $scrollbarX.css(scrollbarXStyles);
+
+            var scrollbarYStyles = {top: scrollbarYTop + $this.scrollTop(), height: scrollbarYHeight};
+            if (isScrollbarYUsingRight) {
+              scrollbarYStyles.right = scrollbarYRight;
+            } else {
+              scrollbarYStyles.left = scrollbarYLeft;
+            }
+
+            $scrollbarY.css(scrollbarYStyles);
+            $scrollbarX.hide().show();
+            $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();
+        bindScrollHandler();
+        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;
+    });
+  };
+}));
Author	SHA1	Message	Date
Hyunje Alex Jun	630f0686a9	Release 0.4.10. 1. Add opposite-sided scrollbar feature 2. RTL support 3. Bug fixes	2014-04-27 11:49:33 +01:00
Hyunje Alex Jun	bd99960ed1	Add missing variables when cleaned.	2014-04-27 11:43:21 +01:00
ahspw	b8231ecd79	add rtl support Conflicts: src/perfect-scrollbar.js	2014-04-27 11:41:14 +01:00
Hyunje Alex Jun	4a8e8066ab	Implement opposite-sided scrollbars. Now when you use `top` for the x-axis scrollbar or `left` for the y-axis scrollbar, the scrollbars will be displayed on the opposite side.	2014-04-27 11:01:11 +01:00
ahspw	61e1e6893d	fix some typos	2014-04-25 22:00:29 +01:00
Hyunje Alex Jun	8d30c29602	Update names and licenses.	2014-04-10 23:39:49 +01:00
Hyunje Alex Jun	f77fa0b05b	Merge pull request #132 from Feasul/patch-2 Prevent scrollbar rail disappearance during scrolling.	2014-04-05 20:05:37 +01:00
Andrey Nikitenko	6559492079	Update perfect-scrollbar.css prevent scrollbar rail from disappearing when mouse pointer leaves scrollbar area while dragging the scrollbar	2014-04-04 16:24:47 +03:00
Hyunje Alex Jun	70fcb3a6c4	Update README.md Use innerWidth and innerHeight for 'includePadding' option.	2014-04-02 00:58:41 +09:00
Hyunje Alex Jun	4357617540	Release 0.4.9. 1. Update jquery-mousewheel to 3.1.9 2. CommonJS compatible 3. Add 'includePadding' option 4. Bug fixes	2014-04-02 00:46:07 +09:00
Hyunje Alex Jun	0f5384948e	Prevent default when using 'useBothWheelAxes' option.	2014-04-02 00:42:00 +09:00
Hyunje Alex Jun	9a589639b0	Merge pull request #119 from noraesae/mousewheel-speed Change mousewheel delta calculation logic.	2014-04-02 00:26:06 +09:00
Hyunje Alex Jun	b26933e6a5	Merge pull request #131 from Feasul/patch-1 Use innerWidth/Height instead of outerWidth/Height to determine the width/height of container.	2014-04-02 00:23:21 +09:00
Andrew	32718ae9cc	As per jQuery docs the `innerWidth` method is the one that includes padding (https://api.jquery.com/innerWidth/), while the previously used `outerWidth` includes border width as well (https://api.jquery.com/outerWidth/). Therefore the use of `innerWidth` makes more sense for getting the container width with padding in the code (plus a setting name `includePadding` suggest only padding width is taken into account as an extra for container width determination and might be confusing otherwise). The same goes to `innerHeight` vs `outerHeight`.	2014-04-01 14:27:54 +03:00
Hyunje Alex Jun	fdcedcbbf5	Apply deltaFactor for the delta calculation of mousewheel.	2014-03-23 06:05:00 +09:00
Hyunje Alex Jun	9225275e6c	Don't use 'wheelSpeed' value for keyboard scrolling.	2014-03-23 06:05:00 +09:00
Hyunje Alex Jun	84360fb730	Merge pull request #124 from strichter/master Fix scrolling within nested scrollable DIVs.	2014-03-23 05:07:24 +09:00
Stephan Richter	1a335902cc	Fix scrolling within nested scrollable DIVs. Fixes https://github.com/noraesae/perfect-scrollbar/issues/101	2014-03-22 11:29:07 -04:00
Hyunje Alex Jun	2ccb8f18d5	Use strict mode for function scopes. Global strict mode is problematic when the script is concatenated with non-strict scripts.	2014-03-11 16:09:39 +09:00
Hyunje Alex Jun	da05a85ed6	Update README.md	2014-03-10 16:43:04 +09:00
Hyunje Alex Jun	57e5710ab0	Add a description for the 'includePadding' option in README.md	2014-03-10 16:36:26 +09:00
Oleg Kalistratov	9420d1b6a9	Add 'includePadding' option (use container outerWidth/outerHeight instead of width/head)	2014-03-10 16:31:50 +09:00
Hyunje Alex Jun	ee7d3bf62c	Add an 'Install' section in README.md	2014-03-10 16:26:50 +09:00
Moritz Meyer	275a928532	create bower json and ignore bower_components directory	2014-03-10 16:09:18 +09:00
Steve Lamb	fc24bbc631	CommonJS compatibility	2014-03-10 01:41:50 +09:00
Joshua Balloch	b45a94971c	update readme	2014-03-10 01:41:50 +09:00
Rupert Angermeier	0544fe7241	Fix delta calculation in mouswheel handler Remove division by 10, makes scrolling slower than in previous versions. Reverts 88d286957766e981a4f4c720f213164fc0f3f099	2014-03-10 01:41:18 +09:00
Rupert Angermeier	bc6ef6480a	Don't scroll by keyevent while form element has focus	2014-03-10 01:41:18 +09:00
Hyunje Alex Jun	04391d4dec	Additional typo fix for the patch below.	2014-03-10 01:41:18 +09:00
Ilan	fa03b68938	Fixed typo in CSS: missing space in "-webkit-transition:background-color.2s linear".	2014-03-10 01:41:18 +09:00
Hyunje Alex Jun	fa51f455fe	Avoid the 'divide by zero' problem in bindMobileTouchHandler.	2014-03-10 01:41:18 +09:00
Hyunje Alex Jun	aa0b57c51d	Change delta calculation in mousewheel handler. The new version of jquery-mousewheel's delta values are changed, and should use the new calculation for the values.	2014-03-10 01:41:18 +09:00
Triangle717	a9000d4b6d	Update jquery-mousewheel to 3.1.9	2014-01-24 13:37:50 -05:00
Hyunje Alex Jun	4c0163a2f6	Release 0.4.8. 1. Bug fixes.	2014-01-22 11:21:35 +09:00
Hyunje Alex Jun	f1491e777d	Fix the bug that scrollbar rails show when they shouldn't. Now, the scrollbar rails show even if the content is smaller than the container. This patch fixes it.	2014-01-22 11:17:29 +09:00
Hyunje Alex Jun	c1c41e6d14	CSS fixes for IE.	2014-01-21 21:38:45 +09:00
Hyunje Alex Jun	e159cbbda5	Release 0.4.7. 1. Don't prevent the default scrolling for the inactive axis. 2. Enhance the scrolling logic. 3. Implement Home, End, Page Up, Page Down and Spacebar for the key scrolling. 4. Bug fixes.	2014-01-21 12:30:13 +09:00
Hyunje Alex Jun	b8d8218c03	Add a getEventClassName() function. Each scrollbar object should have its own event class name. Unless, When the one scrollbar is destroyed, another one's event will be unbinded too. The getEventClassName() function returns a unique event class name.	2014-01-21 12:22:04 +09:00
Hyunje Alex Jun	d58e109d98	Add an example about the callback to check if it reaches the end.	2014-01-21 11:57:30 +09:00
Hyunje Alex Jun	de3bc97437	Merge pull request #92 from asiviero/master Implement Home, End, Page Up, Page Down and Spacebar.	2014-01-20 18:55:54 -08:00
Andre Siviero	63c6d67ad5	Implemments Home, End, pageUp, pageDown and Spacebar	2014-01-20 20:14:26 -02:00
Hyunje Alex Jun	40b46a4071	Change the scrolling logic. Add a scroll handler to handle the previously unhandled events, and remove updateBarSizeAndPosition() where it's not needed anymore.	2014-01-15 00:23:21 +09:00
Hyunje Alex Jun	71838b9f72	Don't prevent the default scrolling for the inactive axis.	2013-12-14 16:33:15 +09:00
Hyunje Alex Jun	693bc9b784	Change the names in perfect-scrollbar.jquery.json. Change 'J' to 'j'.	2013-12-06 11:41:08 +09:00
Hyunje Alex Jun	23722670c2	Release 0.4.6. 1. Following options are added. - suppressScrollX, suppressScrollY, scrollXMarginOffset and scrollYMarginOffset	2013-12-06 11:28:41 +09:00
Hyunje Alex Jun	e390a89f57	Add an example for the scroll suppression feature. The 'suppressScrollX' and 'suppressScrollY' features were added and this patch add the example for the features.	2013-12-06 11:25:48 +09:00
Hyunje Alex Jun	6595d602b1	Merge pull request #77 from adrianonantua/master Added 4 new setting options (suppressScrollX, suppressScrollY, scrollXMarginOffset and scrollYMarginOffset)	2013-12-05 18:25:25 -08:00
Adrian Carneiro	05fadaa786	README.md formatting	2013-11-06 15:28:39 -05:00
Adrian Carneiro	fa806adb55	Added 4 new setting options (suppressScrollX, suppressScrollY, scrollXMarginOffset and scrollYMarginOffset) Added 4 new setting options (suppressScrollX, suppressScrollY, scrollXMarginOffset and scrollYMarginOffset)	2013-11-06 15:20:30 -05:00
Hyunje Alex Jun	ad0e1e4fab	Release 0.4.5. Patch notes 1. AMD compatibility. 2. Add 'useBothWheelAxes' feature. 3. Implement keyboard scrolling. 4. Implement visible rails.	2013-09-30 23:37:59 +09:00
Hyunje Alex Jun	43c7b22678	Add click handlers on scrollbar rails to scroll to the position.	2013-09-30 23:32:50 +09:00
Hyunje Alex Jun	51db8add43	Implement visible rail feature. Now the scrollbars are wrapped by rail elements, and the styles and scripts are heavily changed to implement the feature.	2013-09-30 23:32:50 +09:00
Hyunje Alex Jun	8ea7291469	Implement keyboard scrolling. Now when the element is hovered by mouse cursor, it can be scrolled with arrow keys on the keyboard.	2013-09-30 17:24:12 +09:00
Hyunje Alex Jun	c4632c97ed	Change the event namespace to 'perfect-scrollbar'. There's no reason to use 'perfect-scroll'. It's weird.	2013-09-30 17:04:26 +09:00
Hyunje Alex Jun	7fec407295	Update README.md. Fix some texts and add a notation for using example codes.	2013-09-30 16:26:21 +09:00
Hyunje Alex Jun	67635e54d7	Add an example for 'useBothWheelAxes' option.	2013-09-30 16:19:24 +09:00
Hyunje Alex Jun	b0c8e91f18	Change the title in example codes and update jQuery to 1.10.	2013-09-30 15:48:51 +09:00
Hyunje Alex Jun	18c9517205	Merge pull request #64 from jakubmal/flexible-scroll Use vertical scroll for horizontal scrollbar if only horizontal scrollbar is present.	2013-09-29 23:47:44 -07:00
Jakub Malinowski	16998f95f1	Added optional useBothWheelAxes to allow more flexible scrolling if only one axe is scrollable	2013-09-28 00:53:57 +02:00
Hyunje Alex Jun	7a65e01ab5	Merge pull request #63 from julien/master Make it AMD compatible.	2013-09-23 19:54:27 -07:00
Julien Castelain	067b10d83d	Make it AMD compatible	2013-09-20 11:04:29 +02:00
Hyunje Alex Jun	58261f2ace	Release 0.4.4. Patch notes 1. Bug fixes.	2013-09-09 10:44:48 +09:00
Hyunje Alex Jun	ebef76a2c6	Add unbind for 'document'. The function call is needed cause there are mouse handlers for the element.	2013-09-09 10:12:35 +09:00
Hyunje Alex Jun	be5e338869	Update jshintrc. Added strict, laxcomma and camelcase options. Removed the es5 option.	2013-08-31 02:24:43 +09:00
Hyunje Alex Jun	cf8cea8b13	Fix that wheelPropagation option doesn't work in Firefox.	2013-08-06 15:14:55 +09:00
Fabian Vogelsteller	74f97e330e	reduced the risk of memory leaks	2013-08-06 14:18:21 +09:00
Hyunje Alex Jun	b461fa895b	Release 0.4.3. Patch notes 1. Quick fix for the scrolling problem in Firefox.	2013-08-01 02:16:44 +09:00
Hyunje Alex Jun	af7194114a	Fix Firefox scrolling problem in OS X. In OS X, there was the problem that the mousewheel event's preventDefault() doesn't work well. This patch fixes the problem.	2013-08-01 02:03:44 +09:00
Hyunje Alex Jun	540834308e	Fix typos in README.md.	2013-08-01 01:33:10 +09:00
Hyunje Alex Jun	bdda167317	Release 0.4.2. Patch notes 1. Change the logic to detect touch devices. 2. Add minScrollbarLength setting.	2013-08-01 01:09:15 +09:00
Hyunje Alex Jun	123b1d724b	Fix the formula between scroll position and scrollbar position. With @Mordhak's suggestion, fixed the formula to calculate the values. This patch will resolve the scroll position problem when the minScrollbarLength setting is applied.	2013-08-01 01:03:33 +09:00
Hyunje Alex Jun	68032d168b	Merge pull request #48 from itsdrewmiller/master Add minScrollbarLength setting.	2013-07-31 08:42:40 -07:00
Drew Miller	ab2a018c93	minScrollbarLength setting I couldn't figure out the rebasing stuff so I just deleted my fork and redid the work. I believe I followed the contributing guidlines correctly as well.	2013-07-17 12:53:02 -04:00
Zeno Zeng	68c297fe2c	Use `supportsTouch` instead of `isMobile`.	2013-07-08 23:25:24 +09:00
Hyunje Alex Jun	09c0fb89d2	Use travis-ci.	2013-07-08 23:08:49 +09:00
Hyunje Alex Jun	5124a27113	Release 0.4.1. Patch notes 1. Wrap core functionality in an each function. 2. Use scrollHeight and scrollWidth for content size. 3. IE fixes. 4. Bug fixes.	2013-06-27 11:26:21 +09:00
Hyunje Alex Jun	fa5e6cb38c	Add version number in minified sources. Version number is parsed from package.json. Before release, the version number have '-dev' postfix.	2013-06-18 18:54:09 +09:00
Hyunje Alex Jun	dd89f14243	Add contrib-clean to Grunt. We should clean 'min' directory before build.	2013-06-18 18:46:40 +09:00
Hyunje Alex Jun	7e5b225d61	Display an old version requirement. This reverts commit f7d953d1eb2e3315d6b6b9d1f9ed217eaa22be6d. And add 'for old versions' mark to the requirement.	2013-06-18 16:19:10 +09:00
Hyunje Alex Jun	e35920f10e	Update README. Add 'IE Support'.	2013-06-16 18:31:29 +09:00
Hyunje Alex Jun	4f6463114c	Merge the patches of @maoziliang. Includes IE fixes.	2013-06-16 17:59:21 +09:00
Hyunje Alex Jun	f02f5e89b7	Fix ie6 scrollbar position problem. This patch is in fact contributed by the idea of @maoziliang.	2013-06-16 17:56:40 +09:00
Hyunje Alex Jun	21d5d4ab63	Separate the function updating the css of scrollbars.	2013-06-16 17:45:37 +09:00
maoziliang	e833f42d02	Fixed the scrollbar height for xp sp3 ie6 set 'font-size:0' for the scrollbar	2013-06-16 17:22:18 +09:00
maoziliang	a52d55957d	Add hover handlers for ie6. Use scripts to add '.hover' class on the `.ps-container` and both scrollbars when then mouse is over them because :hover is not supported except 'a' element.	2013-06-16 17:13:20 +09:00
maoziliang	e93d67e754	Add feature to suport ie. For ie browser, the `.ps-container` element will add extra class `ie` and `ie<version>`, like `ie6`, `ie7`, `ie8`, etc.	2013-06-16 17:00:12 +09:00
maoziliang	37210ee453	Add a sample based on text content	2013-06-16 16:49:30 +09:00
Hyunje Alex Jun	6021ec016e	Update README. The link to Contributing wiki page is added.	2013-06-16 00:30:43 +09:00
Hyunje Alex Jun	9be4a1a85f	Minify source files with the new build system. From now, the build can be done with 'grunt build'.	2013-06-16 00:30:43 +09:00
Hyunje Alex Jun	f65c9cb0bb	Add files for Grunt.	2013-06-16 00:30:43 +09:00
Hyunje Alex Jun	29a0c13c65	Add csslintrc.	2013-06-15 22:04:50 +09:00
Hyunje Alex Jun	d8c961ee32	Csslint the css file.	2013-06-15 22:04:50 +09:00
Hyunje Alex Jun	a4d8487ee3	Remove build shell script. We'll use grunt to build the scripts. The shell script is no more used.	2013-06-15 20:59:26 +09:00
Hyunje Alex Jun	ff55090cd3	Add node_modules in gitignore.	2013-06-15 20:59:07 +09:00
Hyunje Alex Jun	7bc05bbda1	Refactor jshint files. We'll use grunt, and jshintignore is useless. Remove comments in jshintrc to be parsed in grunt.	2013-06-15 20:49:22 +09:00
Hyunje Alex Jun	3b1c37440e	Inhance the scroll logic with mobile touches. The scroll works only when the user touch and scroll the wrapper div with just one touch. By this patch, the zoom function will not be prevented by scrolling content.	2013-06-14 21:57:24 +09:00
Hyunje Alex Jun	aeab94c7d6	Fix the wrong indents in example pages.	2013-06-14 21:39:53 +09:00
Hyunje Alex Jun	eb8f28cd26	JSHint the code. Missing space.	2013-06-14 21:38:33 +09:00
Hyunje Alex Jun	d5ef529438	Modify README.md. The requirement that force just one content element is gone.	2013-06-14 21:36:47 +09:00
Hyunje Alex Jun	34a505d319	Remove $content. It's not used anymore.	2013-06-14 21:35:32 +09:00
Hyunje Alex Jun	a8db04e41d	Merge pull request #36 from zenozeng/master Use prop('scrollWidth') and prop('scrollHeight') instead of outerWidth() and outerHeight() to get the content size.	2013-06-14 05:32:44 -07:00
Zeno Zeng	d14dfd307e	use scrollHeight & scrollWidth to avoid getting the wrong size of the content	2013-06-14 10:13:30 +08:00
Hyunje Alex Jun	de6e4d59b0	Merge pull request #34 from itsdrewmiller/master pull request for the fix provided in issue 16, for both vertical and horizontal scrolling	2013-06-12 09:29:49 -07:00
itsdrewmiller	351631cfa7	Fixing jumpiness for large scrolls https://github.com/noraesae/perfect-scrollbar/issues/16	2013-06-12 12:57:43 -03:00
Hyunje Alex Jun	2f6432d263	Merge pull request #30 from maoziliang/master Update the destroy method. Unbind listeners by event namespace.	2013-06-01 20:40:34 -07:00
maoziliang	3410cf89be	update the destroy method. unbind listeners by event namespace. This will be convenient for adding new event bind in the file. Do not worry about forgetting to unbind it.	2013-06-02 11:16:33 +08:00
Hyunje Alex Jun	b89660f959	Merge pull request #26 from ahmadsherif/master Wrap core functionality in an each function.	2013-05-22 18:46:32 -07:00
Ahmad Sherif	d5dd3422cf	Wrap core functionality in an each function If we have many DOM elements that match the PerfectScrollbar selector, then all elemets get scrolled if one of them is scrolled.	2013-05-22 11:48:51 +02:00
Hyunje Alex Jun	c6c087275c	Release 0.3.4. Patch notes 1. Fix the bug that scrollbars don't stop at the end. 2. Code refactoring.	2013-05-18 12:43:38 +09:00
Hyunje Alex Jun	4613c3daee	Code refactoring.	2013-05-18 12:41:15 +09:00
Hyunje Alex Jun	667c61d2c3	Add jshint files.	2013-05-18 12:39:26 +09:00
Hyunje Alex Jun	4012ce9c8c	Prevent scrollbar x from moving out of the container.	2013-05-18 12:21:20 +09:00
Hyunje Alex Jun	9734a18d01	Merge pull request #19 from EtnasSoft/master Fixed bug with the Mouse Wheel and the right scroll bar.	2013-05-17 20:18:19 -07:00
etnassoft	4f49b0fa7f	Fix bug with mouse wheel	2013-03-21 11:21:20 +01:00
Hyunje Alex Jun	9d6728e3ff	Release 0.3.3. Patch notes 1. Apply jshint. 2. Fix jQuery plugin site version problem.	2013-03-14 15:47:20 +09:00
Hyunje Alex Jun	69c37268a1	Apply jshint.	2013-03-14 15:46:12 +09:00
				`@@ -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)}