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.
Add a getEventClassName() function.
2014-01-21 12:30:13 +09:00 · 2014-01-21 12:22:04 +09:00 · 2014-01-21 11:57:30 +09:00 · 2014-01-20 18:55:54 -08:00 · 2014-01-20 20:14:26 -02:00 · 2014-01-15 00:23:21 +09:00
21 changed files with 599 additions and 202 deletions
--- a/.jshintrc
+++ b/.jshintrc
@@ -22,8 +22,7 @@
    "debug"         : false,
    "devel"         : true,

-    "es5"           : true,
-    "strict"        : false,
+    "strict"        : true,
    "globalstrict"  : true,

    "asi"           : false,
@@ -56,5 +55,7 @@
    "sub"           : false,
    "trailing"      : true,
    "white"         : true,
-    "indent"        : 2
+    "indent"        : 2,
+    "laxcomma"      : true,
+    "camelcase"     : true
 }
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -27,7 +27,7 @@ module.exports = function (grunt) {
            'src/jquery.mousewheel.js'
          ]
        }
-      },
+      }
    },
    jshint: {
      gruntfile: {
@@ -47,7 +47,7 @@ module.exports = function (grunt) {
      strict: {
        options: {
          csslintrc: '.csslintrc',
-          import: 2
+          'import': 2
        },
        src: ['src/perfect-scrollbar.css']
      }
--- a/README.md
+++ b/README.md
@@ -56,16 +56,40 @@ 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
- 
+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**
+
 How to Use
 ----------

@@ -108,6 +132,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
 --------------------

--- a/examples/options-default.html
+++ b/examples/options-default.html
@@ -4,7 +4,7 @@
    <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="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>
--- a/examples/options-minScrollbarLength.html
+++ b/examples/options-minScrollbarLength.html
@@ -2,9 +2,9 @@
 <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>
+    <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="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>
--- 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,9 +2,9 @@
 <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>
+    <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="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>
--- a/examples/options-wheelSpeed.html
+++ b/examples/options-wheelSpeed.html
@@ -2,9 +2,9 @@
 <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>
+    <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="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>
--- 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/text-content.html
+++ b/examples/text-content.html
@@ -3,9 +3,9 @@
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

-    <title>Ul-content</title>
+    <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="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>
--- a/min/perfect-scrollbar-0.4.2.min.css
+++ b/min/perfect-scrollbar-0.4.2.min.css
@@ -1,5 +0,0 @@
-/*! perfect-scrollbar - v0.4.2
-* http://noraesae.github.com/perfect-scrollbar/
-* Copyright (c) 2013 HyeonJe Jun; Licensed MIT */
-
-.ps-container .ps-scrollbar-x{position:absolute;bottom:3px;height:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:opacity .2s linear;-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container.ie6 .ps-scrollbar-x{font-size:0}.ps-container:hover .ps-scrollbar-x,.ps-container.hover .ps-scrollbar-x{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x:hover,.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;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:opacity .2s linear;-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container.ie .ps-scrollbar-y{font-size:0}.ps-container:hover .ps-scrollbar-y,.ps-container.hover .ps-scrollbar-y{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y:hover,.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-0.4.2.min.js
+++ b/min/perfect-scrollbar-0.4.2.min.js
--- a/min/perfect-scrollbar-0.4.2.with-mousewheel.min.js
+++ b/min/perfect-scrollbar-0.4.2.with-mousewheel.min.js
--- a/min/perfect-scrollbar-0.4.7.min.css
+++ b/min/perfect-scrollbar-0.4.7.min.css
@@ -0,0 +1,5 @@
+/*! perfect-scrollbar - v0.4.7
+* http://noraesae.github.com/perfect-scrollbar/
+* Copyright (c) 2014 Hyeonje Jun; Licensed MIT */
+
+.ps-container .ps-scrollbar-x-rail{position:absolute;bottom:3px;height:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color.2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}.ps-container:hover .ps-scrollbar-x-rail,.ps-container.hover .ps-scrollbar-x-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x-rail:hover,.ps-container .ps-scrollbar-x-rail.hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-x-rail.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y-rail{position:absolute;right:3px;width:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color.2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}.ps-container:hover .ps-scrollbar-y-rail,.ps-container.hover .ps-scrollbar-y-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y-rail:hover,.ps-container .ps-scrollbar-y-rail.hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y-rail.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-x{position:absolute;bottom:0;height:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s linear}.ps-container.ie6 .ps-scrollbar-x{font-size:0}.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x{background-color:#999}.ps-container .ps-scrollbar-y{position:absolute;right:0;width:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s linear}.ps-container.ie .ps-scrollbar-y{font-size:0}.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y{background-color:#999}
--- a/min/perfect-scrollbar-0.4.7.min.js
+++ b/min/perfect-scrollbar-0.4.7.min.js
--- a/min/perfect-scrollbar-0.4.7.with-mousewheel.min.js
+++ b/min/perfect-scrollbar-0.4.7.with-mousewheel.min.js
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "perfect-scrollbar",
-  "version": "0.4.2",
+  "version": "0.4.7",
  "engines": {
    "node": ">= 0.8.0"
  },
--- 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.4.2",
+  "version": "0.4.7",
  "author": {
-    "name": "HyeonJe Jun",
+    "name": "Hyeonje 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 Jun",
      "email": "noraesae@yuiazu.net",
      "url": "https://github.com/noraesae/"
    }
--- a/src/perfect-scrollbar.css
+++ b/src/perfect-scrollbar.css
@@ -1,75 +1,111 @@
-.ps-container .ps-scrollbar-x {
+.ps-container .ps-scrollbar-x-rail {
    position: absolute; /* please don't change 'position' */
-    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x */
+    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
    height: 8px;
-    background-color: #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity: 0;
    filter: alpha(opacity = 0);
-    -o-transition: opacity .2s linear;
-    -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-rail,
+.ps-container.hover .ps-scrollbar-x-rail {
+    opacity: 0.6;
+    filter: alpha(opacity = 60);
+}
+
+.ps-container .ps-scrollbar-x-rail:hover,
+.ps-container .ps-scrollbar-x-rail.hover {
+    background-color: #eee;
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-x-rail.in-scrolling {
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-y-rail {
+    position: absolute; /* please don't change 'position' */
+    right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 8px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    opacity: 0;
+    filter: alpha(opacity = 0);
+    -o-transition: background-color .2s linear, opacity .2s linear;
+    -webkit-transition: background-color.2s linear, opacity .2s linear;
+    -moz-transition: background-color .2s linear, opacity .2s linear;
+    transition: background-color .2s linear, opacity .2s linear;
+}
+
+.ps-container:hover .ps-scrollbar-y-rail,
+.ps-container.hover .ps-scrollbar-y-rail {
+    opacity: 0.6;
+    filter: alpha(opacity = 60);
+}
+
+.ps-container .ps-scrollbar-y-rail:hover,
+.ps-container .ps-scrollbar-y-rail.hover {
+    background-color: #eee;
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-y-rail.in-scrolling {
+    opacity: 0.9;
+    filter: alpha(opacity = 90);
+}
+
+.ps-container .ps-scrollbar-x {
+    position: absolute; /* please don't change 'position' */
+    bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */
+    height: 8px;
+    background-color: #aaa;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    -o-transition: background-color .2s linear;
+    -webkit-transition: background-color.2s linear;
+    -moz-transition: background-color .2s linear;
+    transition: background-color .2s linear;
 }

 .ps-container.ie6 .ps-scrollbar-x {
    font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
 }

-.ps-container:hover .ps-scrollbar-x,
-.ps-container.hover .ps-scrollbar-x {
-    opacity: 0.6;
-    filter: alpha(opacity = 60);
-}
-
-.ps-container .ps-scrollbar-x:hover,
-.ps-container .ps-scrollbar-x.hover {
-    opacity: 0.9;
-    filter: alpha(opacity = 90);
-    cursor:default;
-}
-
-.ps-container .ps-scrollbar-x.in-scrolling {
-    opacity: 0.9;
-    filter: alpha(opacity = 90);
+.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;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
-    opacity: 0;
-    filter: alpha(opacity = 0);
-    -o-transition: opacity .2s linear;
-    -webkit-transition: opacity.2s linear;
-    -moz-transition: opacity .2s linear;
-    transition: opacity .2s linear;
+    -o-transition: background-color .2s linear;
+    -webkit-transition: background-color.2s linear;
+    -moz-transition: background-color .2s linear;
+    transition: background-color .2s linear;
 }

 .ps-container.ie .ps-scrollbar-y {
    font-size: 0; /* fixed scrollbar height in xp sp3 ie6 */
 }

-.ps-container:hover .ps-scrollbar-y,
-.ps-container.hover .ps-scrollbar-y {
-    opacity: 0.6;
-    filter: alpha(opacity = 60);
-}
-
-.ps-container .ps-scrollbar-y:hover,
-.ps-container .ps-scrollbar-y.hover {
-    opacity: 0.9;
-    filter: alpha(opacity = 90);
-    cursor: default;
-}
-
-.ps-container .ps-scrollbar-y.in-scrolling {
-    opacity: 0.9;
-    filter: alpha(opacity = 90);
+.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
+.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
+    background-color: #999;
 }
--- a/src/perfect-scrollbar.js
+++ b/src/perfect-scrollbar.js
@@ -1,20 +1,46 @@
 /* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
 * Licensed under the MIT License
 */
-((function ($) {
+'use strict';
+(function (factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['jquery'], factory);
+  } else {
+    // Browser globals
+    factory(jQuery);
+  }
+}(function ($) {

  // The default settings for the plugin
  var defaultSettings = {
    wheelSpeed: 10,
    wheelPropagation: false,
-    minScrollbarLength: null
+    minScrollbarLength: null,
+    useBothWheelAxes: false,
+    useKeyboard: true,
+    suppressScrollX: false,
+    suppressScrollY: false,
+    scrollXMarginOffset: 0,
+    scrollYMarginOffset: 0
  };

+  var getEventClassName = (function () {
+    var incrementingId = 0;
+    return function () {
+      var id = incrementingId;
+      incrementingId += 1;
+      return '.perfect-scrollbar-' + id;
+    };
+  }());
+
  $.fn.perfectScrollbar = function (suppliedSettings, option) {

    return this.each(function () {
      // Use the default settings
-      var settings = $.extend(true, {}, defaultSettings);
+      var settings = $.extend(true, {}, defaultSettings),
+          $this = $(this);
+
      if (typeof suppliedSettings === "object") {
        // But over-ride any supplied
        $.extend(true, settings, suppliedSettings);
@@ -23,48 +49,86 @@
        option = suppliedSettings;
      }

+      // Catch options
+
      if (option === 'update') {
-        if ($(this).data('perfect-scrollbar-update')) {
-          $(this).data('perfect-scrollbar-update')();
+        if ($this.data('perfect-scrollbar-update')) {
+          $this.data('perfect-scrollbar-update')();
        }
-        return $(this);
+        return $this;
      }
      else if (option === 'destroy') {
-        if ($(this).data('perfect-scrollbar-destroy')) {
-          $(this).data('perfect-scrollbar-destroy')();
+        if ($this.data('perfect-scrollbar-destroy')) {
+          $this.data('perfect-scrollbar-destroy')();
        }
-        return $(this);
+        return $this;
      }

-      if ($(this).data('perfect-scrollbar')) {
+      if ($this.data('perfect-scrollbar')) {
        // if there's already perfect-scrollbar
-        return $(this).data('perfect-scrollbar');
+        return $this.data('perfect-scrollbar');
      }

-      var $this = $(this).addClass('ps-container'),
-          $scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
-          $scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($this),
+
+      // 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($scrollbarX.css('bottom'), 10),
+          scrollbarXBottom = parseInt($scrollbarXRail.css('bottom'), 10),
          scrollbarYHeight,
          scrollbarYTop,
-          scrollbarYRight = parseInt($scrollbarY.css('right'), 10);
+          scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10),
+          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 updateContentScrollTop = function () {
        var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight), 10);
        $this.scrollTop(scrollTop);
-        $scrollbarX.css({bottom: scrollbarXBottom - scrollTop});
+        $scrollbarXRail.css({bottom: scrollbarXBottom - scrollTop});
      };

-      var updateContentScrollLeft = function () {
+      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);
-        $scrollbarY.css({right: scrollbarYRight - scrollLeft});
+        $scrollbarYRail.css({right: scrollbarYRight - scrollLeft});
      };

      var getSettingsAdjustedThumbSize = function (thumbSize) {
@@ -75,8 +139,10 @@
      };

      var updateScrollbarCss = function () {
-        $scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: scrollbarXWidth});
-        $scrollbarY.css({top: scrollbarYTop + $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYHeight});
+        $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth, display: settings.suppressScrollX ? "none": "inherit"});
+        $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: settings.suppressScrollY ? "none": "inherit"});
+        $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth});
+        $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight});
      };

      var updateBarSizeAndPosition = function () {
@@ -84,20 +150,26 @@
        containerHeight = $this.height();
        contentWidth = $this.prop('scrollWidth');
        contentHeight = $this.prop('scrollHeight');
-        if (containerWidth < contentWidth) {
+
+        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 (containerHeight < contentHeight) {
+
+        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);
@@ -113,126 +185,226 @@
        updateScrollbarCss();
      };

-      var moveBarX = function (currentLeft, deltaX) {
-        var newLeft = currentLeft + deltaX,
-            maxLeft = containerWidth - scrollbarXWidth;
-
-        if (newLeft < 0) {
-          scrollbarXLeft = 0;
-        }
-        else if (newLeft > maxLeft) {
-          scrollbarXLeft = maxLeft;
-        }
-        else {
-          scrollbarXLeft = newLeft;
-        }
-        $scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft()});
-      };
-
-      var moveBarY = function (currentTop, deltaY) {
-        var newTop = currentTop + deltaY,
-            maxTop = containerHeight - scrollbarYHeight;
-
-        if (newTop < 0) {
-          scrollbarYTop = 0;
-        }
-        else if (newTop > maxTop) {
-          scrollbarYTop = maxTop;
-        }
-        else {
-          scrollbarYTop = newTop;
-        }
-        $scrollbarY.css({top: scrollbarYTop + $this.scrollTop()});
-      };
-
      var bindMouseScrollXHandler = function () {
        var currentLeft,
            currentPageX;

-        $scrollbarX.bind('mousedown.perfect-scroll', function (e) {
+        $scrollbarX.bind('mousedown' + eventClassName, function (e) {
          currentPageX = e.pageX;
          currentLeft = $scrollbarX.position().left;
-          $scrollbarX.addClass('in-scrolling');
+          $scrollbarXRail.addClass('in-scrolling');
          e.stopPropagation();
          e.preventDefault();
        });

-        $(document).bind('mousemove.perfect-scroll', function (e) {
-          if ($scrollbarX.hasClass('in-scrolling')) {
-            updateContentScrollLeft();
-            moveBarX(currentLeft, e.pageX - currentPageX);
+        $(document).bind('mousemove' + eventClassName, function (e) {
+          if ($scrollbarXRail.hasClass('in-scrolling')) {
+            updateContentScrollLeft(currentLeft, e.pageX - currentPageX);
            e.stopPropagation();
            e.preventDefault();
          }
        });

-        $(document).bind('mouseup.perfect-scroll', function (e) {
-          if ($scrollbarX.hasClass('in-scrolling')) {
-            $scrollbarX.removeClass('in-scrolling');
+        $(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.perfect-scroll', function (e) {
+        $scrollbarY.bind('mousedown' + eventClassName, function (e) {
          currentPageY = e.pageY;
          currentTop = $scrollbarY.position().top;
-          $scrollbarY.addClass('in-scrolling');
+          $scrollbarYRail.addClass('in-scrolling');
          e.stopPropagation();
          e.preventDefault();
        });

-        $(document).bind('mousemove.perfect-scroll', function (e) {
-          if ($scrollbarY.hasClass('in-scrolling')) {
-            updateContentScrollTop();
-            moveBarY(currentTop, e.pageY - currentPageY);
+        $(document).bind('mousemove' + eventClassName, function (e) {
+          if ($scrollbarYRail.hasClass('in-scrolling')) {
+            updateContentScrollTop(currentTop, e.pageY - currentPageY);
            e.stopPropagation();
            e.preventDefault();
          }
        });

-        $(document).bind('mouseup.perfect-scroll', function (e) {
-          if ($scrollbarY.hasClass('in-scrolling')) {
-            $scrollbarY.removeClass('in-scrolling');
+        $(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 () {
-        var shouldPreventDefault = function (deltaX, deltaY) {
-          var scrollTop = $this.scrollTop();
-          if (scrollTop === 0 && deltaY > 0 && deltaX === 0) {
-            return !settings.wheelPropagation;
+        var shouldPrevent = false;
+        $this.bind('mousewheel' + eventClassName, function (e, delta, deltaX, deltaY) {
+          if (!settings.useBothWheelAxes) {
+            // deltaX will only be used for horizontal scrolling and deltaY will
+            // only be used for vertical scrolling - this is the default
+            $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+            $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
+          } else if (scrollbarYActive && !scrollbarXActive) {
+            // only vertical scrollbar is active and useBothWheelAxes option is
+            // active, so let's scroll vertical bar using both mouse wheel axes
+            if (deltaY) {
+              $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+            } else {
+              $this.scrollTop($this.scrollTop() + (deltaX * settings.wheelSpeed));
+            }
+          } else if (scrollbarXActive && !scrollbarYActive) {
+            // useBothWheelAxes and only horizontal bar is active, so use both
+            // wheel axes for horizontal bar
+            if (deltaX) {
+              $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
+            } else {
+              $this.scrollLeft($this.scrollLeft() - (deltaY * settings.wheelSpeed));
+            }
          }
-          else if (scrollTop >= contentHeight - containerHeight && deltaY < 0 && deltaX === 0) {
-            return !settings.wheelPropagation;
-          }
-
-          var scrollLeft = $this.scrollLeft();
-          if (scrollLeft === 0 && deltaX < 0 && deltaY === 0) {
-            return !settings.wheelPropagation;
-          }
-          else if (scrollLeft >= contentWidth - containerWidth && deltaX > 0 && deltaY === 0) {
-            return !settings.wheelPropagation;
-          }
-          return true;
-        };
-
-        $this.bind('mousewheel.perfect-scroll', 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)) {
+          shouldPrevent = shouldPreventDefault(deltaX, deltaY);
+          if (shouldPrevent) {
            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) {
+            return;
+          }
+
+          var deltaX = 0,
+              deltaY = 0;
+
+          switch (e.which) {
+          case 37: // left
+            deltaX = -3;
+            break;
+          case 38: // up
+            deltaY = 3;
+            break;
+          case 39: // right
+            deltaX = 3;
+            break;
+          case 40: // down
+            deltaY = -3;
+            break;
+          case 33: // page up
+            deltaY = 9;
+            break;
+          case 32: // space bar
+          case 34: // page down
+            deltaY = -9;
+            break;
+          case 35: // end
+            deltaY = -containerHeight;
+            break;
+          case 36: // home
+            deltaY = containerHeight;
+            break;
+          default:
+            return;
+          }
+
+          $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+          $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
+
+          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
@@ -251,14 +423,14 @@
            breakingProcess = null,
            inGlobalTouch = false;

-        $(window).bind("touchstart.perfect-scroll", function (e) {
+        $(window).bind("touchstart" + eventClassName, function (e) {
          inGlobalTouch = true;
        });
-        $(window).bind("touchend.perfect-scroll", function (e) {
+        $(window).bind("touchend" + eventClassName, function (e) {
          inGlobalTouch = false;
        });

-        $this.bind("touchstart.perfect-scroll", function (e) {
+        $this.bind("touchstart" + eventClassName, function (e) {
          var touch = e.originalEvent.targetTouches[0];

          startCoords.pageX = touch.pageX;
@@ -272,7 +444,7 @@

          e.stopPropagation();
        });
-        $this.bind("touchmove.perfect-scroll", function (e) {
+        $this.bind("touchmove" + eventClassName, function (e) {
          if (!inGlobalTouch && e.originalEvent.targetTouches.length === 1) {
            var touch = e.originalEvent.targetTouches[0];

@@ -294,7 +466,8 @@
            e.preventDefault();
          }
        });
-        $this.bind("touchend.perfect-scroll", function (e) {
+        $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);
@@ -309,14 +482,37 @@
        });
      };

+      var bindScrollHandler = function () {
+        $this.bind('scroll' + eventClassName, function (e) {
+          updateBarSizeAndPosition();
+        });
+      };
+
      var destroy = function () {
-        $scrollbarX.remove();
-        $scrollbarY.remove();
-        $this.unbind('.perfect-scroll');
-        $(window).unbind('.perfect-scroll');
+        $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
+        $scrollbarX =
+        $scrollbarY =
+        containerWidth =
+        containerHeight =
+        contentWidth =
+        contentHeight =
+        scrollbarXWidth =
+        scrollbarXLeft =
+        scrollbarXBottom =
+        scrollbarYHeight =
+        scrollbarYTop =
+        scrollbarYRight = null;
      };

      var ieSupport = function (version) {
@@ -329,9 +525,11 @@
          var mouseleave = function () {
            $(this).removeClass('hover');
          };
-          $this.bind('mouseenter.perfect-scroll', mouseenter).bind('mouseleave.perfect-scroll', mouseleave);
-          $scrollbarX.bind('mouseenter.perfect-scroll', mouseenter).bind('mouseleave.perfect-scroll', mouseleave);
-          $scrollbarY.bind('mouseenter.perfect-scroll', mouseenter).bind('mouseleave.perfect-scroll', mouseleave);
+          $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 () {
@@ -341,17 +539,6 @@
            $scrollbarX.hide().show();
            $scrollbarY.hide().show();
          };
-          updateContentScrollTop = function () {
-            var scrollTop = parseInt(scrollbarYTop * contentHeight / containerHeight, 10);
-            $this.scrollTop(scrollTop);
-            $scrollbarX.css({bottom: scrollbarXBottom});
-            $scrollbarX.hide().show();
-          };
-          updateContentScrollLeft = function () {
-            var scrollLeft = parseInt(scrollbarXLeft * contentWidth / containerWidth, 10);
-            $this.scrollLeft(scrollLeft);
-            $scrollbarY.hide().show();
-          };
        };

        if (version === 6) {
@@ -370,14 +557,19 @@
        }

        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);
@@ -389,4 +581,4 @@
      return $this;
    });
  };
-})(jQuery));
+}));
Author	SHA1	Message	Date
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