Release 0.4.6.

1. Following options are added. - suppressScrollX, suppressScrollY, scrollXMarginOffset and scrollYMarginOffset
Add an example for the scroll suppression feature.
2013-12-06 11:28:41 +09:00 · 2013-12-06 11:25:48 +09:00 · 2013-12-05 18:25:25 -08:00 · 2013-11-06 15:28:39 -05:00 · 2013-11-06 15:20:30 -05:00 · 2013-09-30 23:37:59 +09:00
20 changed files with 485 additions and 135 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
- 
+**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/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.3.min.css
+++ b/min/perfect-scrollbar-0.4.3.min.css
@@ -1,5 +0,0 @@
-/*! perfect-scrollbar - v0.4.3
-* 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.3.min.js
+++ b/min/perfect-scrollbar-0.4.3.min.js
--- a/min/perfect-scrollbar-0.4.3.with-mousewheel.min.js
+++ b/min/perfect-scrollbar-0.4.3.with-mousewheel.min.js
--- a/min/perfect-scrollbar-0.4.6.min.css
+++ b/min/perfect-scrollbar-0.4.6.min.css
@@ -0,0 +1,5 @@
+/*! perfect-scrollbar - v0.4.6
+* http://noraesae.github.com/perfect-scrollbar/
+* Copyright (c) 2013 HyeonJe Jun; Licensed MIT */
+
+.ps-container .ps-scrollbar-x-rail{position:absolute;bottom:3px;height:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color.2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}.ps-container:hover .ps-scrollbar-x-rail,.ps-container.hover .ps-scrollbar-x-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x-rail:hover,.ps-container .ps-scrollbar-x-rail.hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-x-rail.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y-rail{position:absolute;right:3px;width:8px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;opacity:0;filter:alpha(opacity=0);-o-transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color.2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear}.ps-container:hover .ps-scrollbar-y-rail,.ps-container.hover .ps-scrollbar-y-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y-rail:hover,.ps-container .ps-scrollbar-y-rail.hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y-rail.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-x{position:absolute;bottom:0;height:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s linear}.ps-container.ie6 .ps-scrollbar-x{font-size:0}.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x{background-color:#999}.ps-container .ps-scrollbar-y{position:absolute;right:0;width:8px;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-o-transition:background-color .2s linear;-webkit-transition:background-color.2s linear;-moz-transition:background-color .2s linear;transition:background-color .2s linear}.ps-container.ie .ps-scrollbar-y{font-size:0}.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y{background-color:#999}
--- a/min/perfect-scrollbar-0.4.6.min.js
+++ b/min/perfect-scrollbar-0.4.6.min.js
--- a/min/perfect-scrollbar-0.4.6.with-mousewheel.min.js
+++ b/min/perfect-scrollbar-0.4.6.with-mousewheel.min.js
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "perfect-scrollbar",
-  "version": "0.4.3",
+  "version": "0.4.6",
  "engines": {
    "node": ">= 0.8.0"
  },
--- a/perfect-scrollbar.jquery.json
+++ b/perfect-scrollbar.jquery.json
@@ -2,7 +2,7 @@
  "name": "perfect-scrollbar",
  "title": "perfect-scrollbar",
  "description": "Tiny but perfect jquery scrollbar plugin.",
-  "version": "0.4.3",
+  "version": "0.4.6",
  "author": {
    "name": "HyeonJe Jun",
    "email": "noraesae@yuiazu.net",
--- 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,37 @@
 /* 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
  };

  $.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 +40,59 @@
        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);

      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 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 +103,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 +114,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);
@@ -126,7 +162,8 @@
        else {
          scrollbarXLeft = newLeft;
        }
-        $scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft()});
+        $scrollbarXRail.css({left: $this.scrollLeft()});
+        $scrollbarX.css({left: scrollbarXLeft});
      };

      var moveBarY = function (currentTop, deltaY) {
@@ -142,23 +179,24 @@
        else {
          scrollbarYTop = newTop;
        }
-        $scrollbarY.css({top: scrollbarYTop + $this.scrollTop()});
+        $scrollbarYRail.css({top: $this.scrollTop()});
+        $scrollbarY.css({top: scrollbarYTop});
      };

      var bindMouseScrollXHandler = function () {
        var currentLeft,
            currentPageX;

-        $scrollbarX.bind('mousedown.perfect-scroll', function (e) {
+        $scrollbarX.bind('mousedown.perfect-scrollbar', 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')) {
+        $(document).bind('mousemove.perfect-scrollbar', function (e) {
+          if ($scrollbarXRail.hasClass('in-scrolling')) {
            updateContentScrollLeft();
            moveBarX(currentLeft, e.pageX - currentPageX);
            e.stopPropagation();
@@ -166,27 +204,30 @@
          }
        });

-        $(document).bind('mouseup.perfect-scroll', function (e) {
-          if ($scrollbarX.hasClass('in-scrolling')) {
-            $scrollbarX.removeClass('in-scrolling');
+        $(document).bind('mouseup.perfect-scrollbar', function (e) {
+          if ($scrollbarXRail.hasClass('in-scrolling')) {
+            $scrollbarXRail.removeClass('in-scrolling');
          }
        });
+
+        currentLeft =
+        currentPageX = null;
      };

      var bindMouseScrollYHandler = function () {
        var currentTop,
            currentPageY;

-        $scrollbarY.bind('mousedown.perfect-scroll', function (e) {
+        $scrollbarY.bind('mousedown.perfect-scrollbar', 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')) {
+        $(document).bind('mousemove.perfect-scrollbar', function (e) {
+          if ($scrollbarYRail.hasClass('in-scrolling')) {
            updateContentScrollTop();
            moveBarY(currentTop, e.pageY - currentPageY);
            e.stopPropagation();
@@ -194,11 +235,14 @@
          }
        });

-        $(document).bind('mouseup.perfect-scroll', function (e) {
-          if ($scrollbarY.hasClass('in-scrolling')) {
-            $scrollbarY.removeClass('in-scrolling');
+        $(document).bind('mouseup.perfect-scrollbar', function (e) {
+          if ($scrollbarYRail.hasClass('in-scrolling')) {
+            $scrollbarYRail.removeClass('in-scrolling');
          }
        });
+
+        currentTop =
+        currentPageY = null;
      };

      // bind handlers
@@ -222,21 +266,155 @@
          return true;
        };

-        $this.bind('mousewheel.perfect-scroll', function (e, delta, deltaX, deltaY) {
+        var shouldPrevent = false;
+        $this.bind('mousewheel.perfect-scrollbar', function (e, delta, deltaX, deltaY) {
+          if (!settings.useBothWheelAxes) {
+            // deltaX will only be used for horizontal scrolling and deltaY will
+            // only be used for vertical scrolling - this is the default
+            $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+            $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
+          } else if (scrollbarYActive && !scrollbarXActive) {
+            // only vertical scrollbar is active and useBothWheelAxes option is
+            // active, so let's scroll vertical bar using both mouse wheel axes
+            if (deltaY) {
+              $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
+            } else {
+              $this.scrollTop($this.scrollTop() + (deltaX * settings.wheelSpeed));
+            }
+          } else if (scrollbarXActive && !scrollbarYActive) {
+            // useBothWheelAxes and only horizontal bar is active, so use both
+            // wheel axes for horizontal bar
+            if (deltaX) {
+              $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));
+            } else {
+              $this.scrollLeft($this.scrollLeft() - (deltaY * settings.wheelSpeed));
+            }
+          }
+
+          // update bar position
+          updateBarSizeAndPosition();
+
+          shouldPrevent = shouldPreventDefault(deltaX, deltaY);
+          if (shouldPrevent) {
+            e.preventDefault();
+          }
+        });
+
+        // fix Firefox scroll problem
+        $this.bind('MozMousePixelScroll.perfect-scrollbar', function (e) {
+          if (shouldPrevent) {
+            e.preventDefault();
+          }
+        });
+      };
+
+      var bindKeyboardHandler = function () {
+        var shouldPreventDefault = function (deltaX, deltaY) {
+          var scrollTop = $this.scrollTop();
+          if (scrollTop === 0 && deltaY > 0 && deltaX === 0) {
+            return false;
+          }
+          else if (scrollTop >= contentHeight - containerHeight && deltaY < 0 && deltaX === 0) {
+            return false;
+          }
+
+          var scrollLeft = $this.scrollLeft();
+          if (scrollLeft === 0 && deltaX < 0 && deltaY === 0) {
+            return false;
+          }
+          else if (scrollLeft >= contentWidth - containerWidth && deltaX > 0 && deltaY === 0) {
+            return false;
+          }
+          return true;
+        };
+
+        var hovered = false;
+        $this.bind('mouseenter.perfect-scrollbar', function (e) {
+          hovered = true;
+        });
+        $this.bind('mouseleave.perfect-scrollbar', function (e) {
+          hovered = false;
+        });
+
+        var shouldPrevent = false;
+        $(document).bind('keydown.perfect-scrollbar', function (e) {
+          if (!hovered) {
+            return;
+          }
+
+          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;
+          default:
+            return;
+          }
+
          $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('DOMMouseScroll.perfect-scroll', function (e) { e.preventDefault(); });
-        $this.bind('MozMousePixelScroll.perfect-scroll', function (e) { e.preventDefault(); });
+      var bindRailClickHandler = function () {
+        var stopPropagation = function (e) { e.stopPropagation(); };
+
+        $scrollbarY.bind('click.perfect-scrollbar', stopPropagation);
+        $scrollbarYRail.bind('click.perfect-scrollbar', function (e) {
+          var halfOfScrollbarLength = parseInt(scrollbarYHeight / 2, 10),
+              positionTop = e.pageY - $scrollbarYRail.offset().top - halfOfScrollbarLength,
+              maxPositionTop = containerHeight - scrollbarYHeight,
+              positionRatio = positionTop / maxPositionTop;
+
+          if (positionRatio < 0) {
+            positionRatio = 0;
+          } else if (positionRatio > 1) {
+            positionRatio = 1;
+          }
+
+          $this.scrollTop((contentHeight - containerHeight) * positionRatio);
+
+          // update bar position
+          updateBarSizeAndPosition();
+        });
+
+        $scrollbarX.bind('click.perfect-scrollbar', stopPropagation);
+        $scrollbarXRail.bind('click.perfect-scrollbar', function (e) {
+          var halfOfScrollbarLength = parseInt(scrollbarXWidth / 2, 10),
+              positionLeft = e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength,
+              maxPositionLeft = containerWidth - scrollbarXWidth,
+              positionRatio = positionLeft / maxPositionLeft;
+
+          if (positionRatio < 0) {
+            positionRatio = 0;
+          } else if (positionRatio > 1) {
+            positionRatio = 1;
+          }
+
+          $this.scrollLeft((contentWidth - containerWidth) * positionRatio);
+
+          // update bar position
+          updateBarSizeAndPosition();
+        });
      };

      // bind mobile touch handler
@@ -255,14 +433,14 @@
            breakingProcess = null,
            inGlobalTouch = false;

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

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

          startCoords.pageX = touch.pageX;
@@ -276,7 +454,7 @@

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

@@ -298,7 +476,8 @@
            e.preventDefault();
          }
        });
-        $this.bind("touchend.perfect-scroll", function (e) {
+        $this.bind("touchend.perfect-scrollbar", function (e) {
+          clearInterval(breakingProcess);
          breakingProcess = setInterval(function () {
            if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
              clearInterval(breakingProcess);
@@ -314,13 +493,30 @@
      };

      var destroy = function () {
-        $scrollbarX.remove();
-        $scrollbarY.remove();
-        $this.unbind('.perfect-scroll');
-        $(window).unbind('.perfect-scroll');
+        $this.unbind('.perfect-scrollbar');
+        $(window).unbind('.perfect-scrollbar');
+        $(document).unbind('.perfect-scrollbar');
        $this.data('perfect-scrollbar', null);
        $this.data('perfect-scrollbar-update', null);
        $this.data('perfect-scrollbar-destroy', null);
+        $scrollbarX.remove();
+        $scrollbarY.remove();
+        $scrollbarXRail.remove();
+        $scrollbarYRail.remove();
+
+        // clean all variables
+        $scrollbarX =
+        $scrollbarY =
+        containerWidth =
+        containerHeight =
+        contentWidth =
+        contentHeight =
+        scrollbarXWidth =
+        scrollbarXLeft =
+        scrollbarXBottom =
+        scrollbarYHeight =
+        scrollbarYTop =
+        scrollbarYRight = null;
      };

      var ieSupport = function (version) {
@@ -333,9 +529,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.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
+          $scrollbarXRail.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
+          $scrollbarYRail.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
+          $scrollbarX.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
+          $scrollbarY.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
        };

        var fixIe6ScrollbarPosition = function () {
@@ -376,12 +574,16 @@
        updateBarSizeAndPosition();
        bindMouseScrollXHandler();
        bindMouseScrollYHandler();
+        bindRailClickHandler();
        if (supportsTouch) {
          bindMobileTouchHandler();
        }
        if ($this.mousewheel) {
          bindMouseWheelHandler();
        }
+        if (settings.useKeyboard) {
+          bindKeyboardHandler();
+        }
        $this.data('perfect-scrollbar', $this);
        $this.data('perfect-scrollbar-update', updateBarSizeAndPosition);
        $this.data('perfect-scrollbar-destroy', destroy);
@@ -393,4 +595,4 @@
      return $this;
    });
  };
-})(jQuery));
+}));
Author	SHA1	Message	Date
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