Release 0.4.11.

1. Add active- class when scrolls are active
2. Add maxScrollbarLength option
3. Bug fixes

Gruntfile.js

@@ -21,8 +21,8 @@ module.exports = function (grunt) {
       },
       min: {
         files: {
-          'min/perfect-scrollbar-<%= version %>.min.js': ['src/perfect-scrollbar.js'],
-          'min/perfect-scrollbar-<%= version %>.with-mousewheel.min.js': [
+          'min/perfect-scrollbar.min.js': ['src/perfect-scrollbar.js'],
+          'min/perfect-scrollbar.with-mousewheel.min.js': [
             'src/perfect-scrollbar.js',
             'src/jquery.mousewheel.js'
           ]
@@ -61,7 +61,7 @@ module.exports = function (grunt) {
         cwd: 'src/',
         src: ['perfect-scrollbar.css'],
         dest: 'min/',
-        ext: '-<%= version %>.min.css'
+        ext: '.min.css'
       }
     }
   });

README.md

@@ -67,7 +67,7 @@ To make this plugin *perfect*, some requirements were not avoidable. But they're
 The requirement below is for perfect-scrollbar <= 0.3.4
 
 * there must be the *one* content element(like div) for the container.
- 
+
 Optional parameters
 -------------------
 
@@ -79,12 +79,18 @@ The scroll speed applied to mousewheel event.
 
 ### wheelPropagation
 If this option is true, when the scroll reach the end of the side, mousewheel event will be propagated to parent element.  
+*Currently not supported for touch events*  
 **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**
 
+### maxScrollbarLength
+When set to an integer value, the thumb part of the scrollbar will not expand over 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**
@@ -118,7 +124,11 @@ How to Use
 
 ```html
 <style>
-  #Demo { position: 'relative'; }
+  #Demo { 
+    position: 'relative';
+    height: 100%; // Or whatever you want (eg. 400px)
+    overflow: hidden;
+  }
 </style>
 <div id='Demo'>
   <div>

bower.json

@@ -1,15 +1,15 @@
 {
   "name": "perfect-scrollbar",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "homepage": "http://noraesae.github.io/perfect-scrollbar/",
   "authors": [
-    "Hyeonje Alex Jun <noraesae@yuiazu.net>"
+    "Hyeonje Alex Jun <me@noraesae.net>"
   ],
   "description": "Tiny but perfect jQuery scrollbar plugin",
   "main": [
-    "min/perfect-scrollbar-0.4.10.min.css",
-    "min/perfect-scrollbar-0.4.10.min.js",
-    "min/perfect-scrollbar-0.4.10.with-mousewheel.min.js"
+    "min/perfect-scrollbar.min.css",
+    "min/perfect-scrollbar.min.js",
+    "min/perfect-scrollbar.with-mousewheel.min.js"
   ],
   "license": "MIT",
   "ignore": [
@@ -20,6 +20,6 @@
     "tests"
   ],
   "dependencies": {
-    "jquery": "2.x"
+    "jquery": ">=1.10"
   }
 }

min/perfect-scrollbar.min.css

@@ -1,4 +1,4 @@
-/*! perfect-scrollbar - v0.4.10
+/*! perfect-scrollbar - v0.4.11
 * http://noraesae.github.com/perfect-scrollbar/
 * Copyright (c) 2014 Hyeonje Alex Jun; Licensed MIT */
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-scrollbar",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "engines": {
     "node": ">= 0.8.0"
   },

perfect-scrollbar.jquery.json

@@ -2,10 +2,10 @@
   "name": "perfect-scrollbar",
   "title": "perfect-scrollbar",
   "description": "Tiny but perfect jquery scrollbar plugin.",
-  "version": "0.4.10",
+  "version": "0.4.11",
   "author": {
     "name": "Hyeonje Alex Jun",
-    "email": "noraesae@yuiazu.net",
+    "email": "me@noraesae.net",
     "url": "https://github.com/noraesae/"
   },
   "licenses": [
@@ -15,7 +15,7 @@
     }
   ],
   "dependencies": {
-    "jquery": ">=1.8"
+    "jquery": ">=1.10"
   },
   "keywords": [
     "ui",
@@ -30,7 +30,7 @@
   "maintainers": [
     {
       "name": "Hyeonje Alex Jun",
-      "email": "noraesae@yuiazu.net",
+      "email": "me@noraesae.net",
       "url": "https://github.com/noraesae/"
     }
   ]

src/perfect-scrollbar.js

@@ -22,6 +22,7 @@
     wheelSpeed: 10,
     wheelPropagation: false,
     minScrollbarLength: null,
+    maxScrollbarLength: null,
     useBothWheelAxes: false,
     useKeyboard: true,
     suppressScrollX: false,
@@ -102,7 +103,9 @@
           isScrollbarYUsingRight = scrollbarYRight === scrollbarYRight, // !isNaN
           scrollbarYLeft = isScrollbarYUsingRight ? null: parseInt($scrollbarYRail.css('left'), 10),
           isRtl = $this.css('direction') === "rtl",
-          eventClassName = getEventClassName();
+          eventClassName = getEventClassName(),
+          railBorderXWidth = parseInt($scrollbarXRail.css('borderLeftWidth'), 10) + parseInt($scrollbarXRail.css('borderRightWidth'), 10),
+          railBorderYWidth = parseInt($scrollbarXRail.css('borderTopWidth'), 10) + parseInt($scrollbarXRail.css('borderBottomWidth'), 10);
 
       var updateContentScrollTop = function (currentTop, deltaY) {
         var newTop = currentTop + deltaY,
@@ -156,6 +159,9 @@
         if (settings.minScrollbarLength) {
           thumbSize = Math.max(thumbSize, settings.minScrollbarLength);
         }
+        if (settings.maxScrollbarLength) {
+          thumbSize = Math.min(thumbSize, settings.maxScrollbarLength);
+        }
         return thumbSize;
       };
 
@@ -190,8 +196,20 @@
         }
         $scrollbarYRail.css(scrollbarYStyles);
 
-        $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth});
-        $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight});
+        $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth - railBorderXWidth});
+        $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight - railBorderYWidth});
+
+        if (scrollbarXActive) {
+          $this.addClass('ps-active-x');
+        } else {
+          $this.removeClass('ps-active-x');
+        }
+
+        if (scrollbarYActive) {
+          $this.addClass('ps-active-y');
+        } else {
+          $this.removeClass('ps-active-y');
+        }
       };
 
       var updateBarSizeAndPosition = function () {
@@ -386,6 +404,10 @@
 
         var shouldPrevent = false;
         $(document).bind('keydown' + eventClassName, function (e) {
+          if (e.isDefaultPrevented && e.isDefaultPrevented()) {
+            return;
+          }
+
           if (!hovered || $(document.activeElement).is(":input,[contenteditable]")) {
             return;
           }