0.6.11

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,8 @@
+Make sure these boxes are checked before submitting your issue -- thank you!
+
+- [ ] Check [FAQ](https://github.com/noraesae/perfect-scrollbar/wiki/FAQ)
+- [ ] Search if there's already one reported in Issues
+- [ ] Prepare a JSFiddle reproducing the issue
+  - Perfect Scrollbar JSFiddle: https://jsfiddle.net/DanielApt/xv0rrxv3/
+  - With jQuery: https://jsfiddle.net/DanielApt/gbfLazpx/
+- [ ] Provide a page or source code where the issue can be checked

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,9 @@
+Thank you very much for your contribution! Please make sure the followings
+are checked.
+
+- [ ] Read [CONTRIBUTING.md](../CONTRIBUTING.md)
+- [ ] Run `gulp` to make sure it builds and lints successfully
+- [ ] Provide the scenario this PR will address(some JSFiddles will be perfect)
+  - Perfect Scrollbar JSFiddle: https://jsfiddle.net/DanielApt/xv0rrxv3/
+  - With jQuery: https://jsfiddle.net/DanielApt/gbfLazpx/
+- [ ] Refer to concerning issues if exist

CONTRIBUTING.md

@@ -0,0 +1,74 @@
+# Contributing
+
+I *really* welcome contributions! Please feel free to fork and issue pull requests when...
+
+* You have a very nice idea to improve this plugin!
+* You found a bug!
+* You're good at English and can help my bad English!
+
+For IE problems, please refer to [IE Support](https://github.com/noraesae/perfect-scrollbar#ie-support).
+
+## Introduction
+First of all, thank you in advance for your contribution!
+
+This document will introduce something you should know before making some contributions to **perfect-scrollbar**. I'll try to explain as easy as possible. If there are something missed or not well-documented, please let me know.
+
+Email: [email protected]
+
+## Directory Structure
+Please don't edit files in the `out` subdirectory as they are generated via Gulp. You'll find source code in the `src` subdirectory!
+
+`examples` directory is for the example sources. If you have any example you want to add with a new feature, please add it in the directory.
+
+## Code Conventions
+Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.**
+
+Basically, I try to follow [Douglas Crockford's JavaScript Code Conventions](http://javascript.crockford.com/code.html).
+
+You can check if your code fits in the convention with `gulp lint`.
+
+## Getting Started
+First, ensure that you have stable [Node.js](https://nodejs.org/) and [npm](https://npmjs.com) installed.
+
+Test if Gulp CLI is installed by running `gulp --version`.  If the command isn't found, run `npm install -g gulp`.  For more information about installing Gulp, see the Gulp's [Getting Started](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md).
+
+If `gulp` is installed, follow the steps below.
+
+1. Fork and clone the repo.
+1. Run `npm install` to install all dev dependencies.
+1. Run `gulp` to check if Gulp works well.
+
+Assuming that you don't see any error, you're ready to go.
+
+## Linting Sources
+
+You can use `gulp lint` command to lint the source files. If there're warnings with the command, it means that there are something that don't fit into the convention. Please modify the source to fit.
+
+## Building Sources
+
+You can use the `gulp build` command to build source files into output files.
+
+If you want to watch the modification and build automatically during development, use the `gulp serve` command. It'll automatically rebuild the code when there's any change in it. It will also reload example pages, which is quite helpful.
+
+## Submitting pull requests
+
+1. Create a new branch. Working in your `master` branch is okay, but not recommended.
+1. Modify the sources.
+1. Run `gulp` to see if the code fit into the code convention and build without an error. Repeat steps 2-3 until done.
+1. Update the documentation to reflect any changes.
+1. Create examples if needed.
+1. Push to your fork and submit a pull request.
+
+For further information about pull requests, please refer to GitHub's [Using Pull Requests](https://help.github.com/articles/using-pull-requests).
+
+## Code Review
+
+When the pull request is created, anyone can review the source code. After the review is finished and the patch doesn't have any problem, it'll be merged.
+
+## Conclusion
+
+The process looks somewhat difficult, but it's necessary to avoid maintanance issues and make the code easy to read and use.
+
+If there is any opinion or question, please feel free to contact me.
+
+Email: [email protected]

README.md

@@ -52,16 +52,26 @@ It's cool, isn't it?
 
 ## Install
 
+#### NPM
+
 The best way to install and use perfect-scrollbar is with NPM.
-It's registered on [npm](https://www.npmjs.org/package/perfect-scrollbar) as `perfect-scrollbar`.
+It's registered on [npm](https://www.npmjs.com/package/perfect-scrollbar) as `perfect-scrollbar`.
 
 ```
 $ npm install perfect-scrollbar
 ```
 
+#### Rails
+
+In the case you would like to have perfect-scrollbar in your Rails application, there is the [perfect-scrollbar-rails gem](https://github.com/YourCursus/perfect-scrollbar-rails).
+
+#### Manually
+
 You can download the latest stable version with download links [here](http://noraesae.github.io/perfect-scrollbar/).
 You also can find all releases on [Releases](https://github.com/noraesae/perfect-scrollbar/releases).
 
+#### From sources
+
 If you want to use the development version of the plugin, use the
 source files which are not minified. They're in the `src` directory.
 The development version may be unstable, but some known bugs may
@@ -74,6 +84,7 @@ $ npm install
 $ gulp # will lint and build the source code.
 ```
 
+#### Bower
 
 There is a Bower package for perfect-scrollbar as well. It is managed
 under the [perfect-scrollbar-bower](https://github.com/noraesae/perfect-scrollbar-bower)
@@ -83,9 +94,17 @@ repository. The plugin is registered as `perfect-scrollbar`.
 $ bower install perfect-scrollbar
 ```
 
+#### CDNs
+
+* [cdnjs](http://www.cdnjs.com/libraries/jquery.perfect-scrollbar)
+* [JSDelivr](https://www.jsdelivr.com/projects/perfect-scrollbar)
+
+#### JSFiddle
 
-You can also load it from [cdnjs](http://cdnjs.com/).
-It is registered as [`jquery.perfect-scrollbar`](http://www.cdnjs.com/libraries/jquery.perfect-scrollbar).
+You can fork the following JSFiddles for testing and experimenting purposes:
+
+* [Perfect Scrollbar](https://jsfiddle.net/DanielApt/xv0rrxv3/)
+* [Perfect Scrollbar (jQuery)](https://jsfiddle.net/DanielApt/gbfLazpx/)
 
 ## Requirements
 
@@ -155,7 +174,7 @@ If the size of your container or content changes, call `update`.
 Ps.update(container);
 ```
 
-If you want to destory the scrollbar, use `destroy`.
+If you want to destroy the scrollbar, use `destroy`.
 
 ```javascript
 Ps.destroy(container);
@@ -238,12 +257,12 @@ define([
   'perfectScrollbarJquery'
 ],
 function (angular) {
-  var myApp = angular.module('myApp', [])
-  .run(function() {
+  var app = angular.module('myApp', []);
+  app.run(function () {
     window.Ps = require('perfectScrollbar');
     require('perfectScrollbarJQuery');
-  })
-  return myApp;
+  });
+  return app;
 });
 ```
 
@@ -256,69 +275,66 @@ Ps.initialize(container);
 Ps.update(container);
 
 // or by jQuery:
-var imgLoader = $("#imgLoader")
+var imgLoader = $('#imgLoader')
 imgLoader.perfectScrollbar();
 ```
 
 ## Optional parameters
 
 perfect-scrollbar supports optional parameters.
 
+### handlers
+It is a list of handlers to use to scroll the element.  
+**Default**: `['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch']`  
+**Disabled by default**: `'selection'`
+
 ### wheelSpeed
 The scroll speed applied to mousewheel event.  
-**Default: 1**
+**Default**: `1`
 
 ### wheelPropagation
 If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element.  
-**Default: false**
+**Default**: `false`
 
 ### swipePropagation
 If this option is true, when the scroll reaches the end of the side, touch scrolling will be propagated to parent element.  
-**Default: true**
+**Default**: `true`
 
 ### 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`
 
 ### maxScrollbarLength
 When set to an integer value, the thumb part of the scrollbar will not expand over 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**
+**Default**: `false`
 
 ### suppressScrollX
 When set to true, the scroll bar in X axis will not be available, regardless of the content width.  
-**Default: false**
+**Default**: `false`
 
 ### suppressScrollY
 When set to true, the scroll bar in Y axis will not be available, regardless of the content height.  
-**Default: false**
+**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**
+**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**
+**Default**: `0`
 
 ### stopPropagationOnClick
 When set to false, when clicking on a rail, the click event will be allowed to propagate.  
-**Default: true**
-
-### useSelectionScroll
-When set to true, you can scroll the container by selecting text and move the cursor.  
-**Default: false**
+**Default**: `true`
 
 ### theme
 A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map.  
-**Default: 'default'**
+**Default**: `'default'`
 
 **Example 1:**
 
@@ -329,15 +345,15 @@ Ps.initialize(container, {
 });
 ```
 Create a class name prefixed with `.ps-theme-`. Include `ps-container()` mixin. It's recommended to use `map-merge()` to extend `$ps-theme-default` map with your custom styles.
-```css#
+```scss
 .ps-theme-my-theme-name {
   @include ps-container(map-merge($ps-theme-default, (
     border-radius: 0,
     scrollbar-x-rail-height: 20px,
     scrollbar-x-height: 20px,
     scrollbar-y-rail-width: 20px,
-    scrollbar-y-width: 20px,)
-  ));
+    scrollbar-y-width: 20px
+  )));
 }
 ```
 
@@ -393,24 +409,20 @@ $(document).on('ps-scroll-x', function () {
 })
 ```
 
-## Contribution
-
-#### Please read [Contributing](https://github.com/noraesae/perfect-scrollbar/wiki/Contributing) in the wiki before making any contribution.
-
-
-I *really* welcome contributions! Please feel free to fork and issue pull requests when...
+## Tips
 
-* You have a very nice idea to improve this plugin!
-* You found a bug!
-* You're good at English and can help my bad English!
+### Scrolling children inside perfect-scrollbar
 
-For IE problems, please refer to [IE Support](https://github.com/noraesae/perfect-scrollbar#ie-support).
+You can natively scroll children inside `perfect-scrollbar` with the mouse-wheel. Scrolling automatically works if 
+the child is a `textarea`. All other elements need to have the `ps-child` class. This is demonstrated in [`/examples/children-native-scroll.html`](examples/children-native-scroll.html)
 
 ## IE Support
 
-The plugin would work in IEs >= IE9 (not well, though).
+The plugin is designed to work in modern browsers, including the very latest
+version of IE and Edge. Specifically, it should work in IEs >= IE10. If there
+is any issue in the browsers, please [file it](https://github.com/noraesae/perfect-scrollbar/issues).
 
-**The patches to fix problems in IE<=8 won't be accepted.**
+**The patches to fix problems in IE<=9 won't be accepted.**
 
 When old IEs should be supported, please fork the project and
 make patches personally.

examples/children-native-scroll.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>perfect-scrollbar example</title>
+    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
+    <script src="../dist/js/perfect-scrollbar.js"></script>
+    <style>
+        .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
+        .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+        .my-list, textarea {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 130px;
+            height: 200px;
+            overflow: scroll;
+            background-color: rgba(255,255,255,0.6);
+        }
+
+        .my-list {
+            left: 140px;
+        }
+
+        .my-list-two {
+            left: 280px;
+            overflow: auto;
+        }
+
+        ul {
+            margin: 0;
+            padding: 0;
+        }
+
+        li {
+            box-sizing: border-box;
+            padding: 10px 5px;
+            border-width: 0 0 1px 0;
+            list-style-type: none;
+            margin: 0;
+        }
+
+        li:nth-child(even) {
+            background-color: rgba(0,0,0,0.5);
+        }
+
+        textarea {
+            font-size: 120%;
+        }
+    </style>
+</head>
+<div id="Default" class="contentHolder">
+    <div class="content">
+        <textarea cols="20" rows="50">
+          Children inside perfect scrollbar can be natively scrolled by the mousewheel. It automatically works for textarea elements, other elements need the .ps-child class.
+        </textarea>
+        <div class="ps-child my-list">
+            <code>overflow: scroll</code>
+            <ul><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li></ul>
+        </div>
+        <div class="ps-child my-list my-list-two">
+            <code>overflow: auto</code>
+            <ul><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li></ul>
+        </div>
+    </div>
+</div>
+<script type="text/javascript">
+    window.onload = function () {
+        Ps.initialize(document.querySelector('#Default'));
+    };
+</script>
+</body>
+</html>