Release 0.4.1.

Patch notes
1. Wrap core functionality in an each function.
2. Use scrollHeight and scrollWidth for content size.
3. IE fixes.
4. Bug fixes.

.csslintrc

@@ -0,0 +1,3 @@
+{
+  "adjoining-classes": false
+}

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+node_modules

.jshintrc

@@ -0,0 +1,60 @@
+{
+    "passfail"      : false,
+    "maxerr"        : 100,
+
+    "browser"       : true,
+
+    "node"          : true,
+    "rhino"         : false,
+    "couch"         : false,
+    "wsh"           : false,
+
+    "jquery"        : true,
+    "prototypejs"   : false,
+    "mootools"      : false,
+    "dojo"          : false,
+
+    "predef"        : [
+        "require",
+        "define"
+    ],
+
+    "debug"         : false,
+    "devel"         : true,
+
+    "es5"           : true,
+    "strict"        : false,
+    "globalstrict"  : true,
+
+    "asi"           : false,
+    "laxbreak"      : false,
+    "bitwise"       : true,
+    "boss"          : false,
+    "curly"         : true,
+    "eqeqeq"        : true,
+    "eqnull"        : false,
+    "evil"          : false,
+    "expr"          : false,
+    "forin"         : false,
+    "immed"         : true,
+    "latedef"       : true,
+    "loopfunc"      : false,
+    "noarg"         : true,
+    "regexp"        : true,
+    "regexdash"     : false,
+    "scripturl"     : true,
+    "shadow"        : false,
+    "supernew"      : false,
+    "undef"         : true,
+
+    "newcap"        : true,
+    "noempty"       : false,
+    "nonew"         : true,
+    "nomen"         : false,
+    "onevar"        : false,
+    "plusplus"      : false,
+    "sub"           : false,
+    "trailing"      : true,
+    "white"         : true,
+    "indent"        : 2
+}

Gruntfile.js

@@ -0,0 +1,86 @@
+'use strict';
+
+module.exports = function (grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    // Metadata.
+    pkg: grunt.file.readJSON('perfect-scrollbar.jquery.json'),
+    version: grunt.file.readJSON('package.json').version,
+    banner: '/*! <%= pkg.title || pkg.name %> - v<%= version %>\n' +
+      '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +
+      '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
+      ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n',
+    clean: {
+      files: ['min']
+    },
+    // Task configuration.
+    uglify: {
+      options: {
+        banner: '<%= banner %>'
+      },
+      min: {
+        files: {
+          'min/perfect-scrollbar-<%= version %>.min.js': ['src/perfect-scrollbar.js'],
+          'min/perfect-scrollbar-<%= version %>.with-mousewheel.min.js': [
+            'src/perfect-scrollbar.js',
+            'src/jquery.mousewheel.js'
+          ]
+        }
+      },
+    },
+    jshint: {
+      gruntfile: {
+        options: {
+          jshintrc: '.jshintrc'
+        },
+        src: 'Gruntfile.js'
+      },
+      src: {
+        options: {
+          jshintrc: '.jshintrc'
+        },
+        src: 'src/perfect-scrollbar.js'
+      }
+    },
+    csslint: {
+      strict: {
+        options: {
+          csslintrc: '.csslintrc',
+          import: 2
+        },
+        src: ['src/perfect-scrollbar.css']
+      }
+    },
+    cssmin: {
+      options: {
+        banner: '<%= banner %>'
+      },
+      minify: {
+        expand: true,
+        cwd: 'src/',
+        src: ['perfect-scrollbar.css'],
+        dest: 'min/',
+        ext: '-<%= version %>.min.css'
+      }
+    }
+  });
+
+  // These plugins provide necessary tasks.
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-clean');
+  grunt.loadNpmTasks('grunt-contrib-csslint');
+  grunt.loadNpmTasks('grunt-contrib-cssmin');
+
+  grunt.registerTask('default', 'List commands', function () {
+    grunt.log.writeln("");
+
+    grunt.log.writeln("Run 'grunt lint' to lint the source files");
+    grunt.log.writeln("Run 'grunt build' to minify the source files");
+  });
+
+  grunt.registerTask('lint', ['jshint', 'csslint']);
+  grunt.registerTask('build', ['clean', 'uglify', 'cssmin']);
+
+};

README.md

@@ -39,13 +39,30 @@ It's cool, isn't it?
 Requirements
 ------------
 
-To make this plugin *perfect*, some requirements was not avoidable. But they're all very trivial and there's nothing to worry.
+To make this plugin *perfect*, some requirements were not avoidable. But they're all very trivial and there's nothing to worry about.
 
-* there must be the *one* content element(like div) for the container.
 * the container must have a 'position' css style.
 * the scrollbar's position must be 'absolute'.
 * the scrollbar-x must have a 'bottom' css style, and the scrollbar-y must have a 'right' css style.
 
+The requirement below is for perfect-scrollbar <= 0.3.4
+
+* there must be the *one* content element(like div) for the container.
+ 
+Optional parameters
+-------------------
+
+perfect-scrollbar supports optional parameters.
+
+### wheelSpeed
+The scroll speed applied to mousewheel event.  
+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
+
+
 How to Use
 ----------
 
@@ -63,6 +80,15 @@ When the html document is like above, just use like this:
 ```javascript
 $('#Demo').perfectScrollbar();
 ```
+
+With optional parameters:
+```javascript
+$("#Demo").perfectScrollbar({
+  wheelSpeed: 20,
+  wheelPropagation: true
+})
+```
+
 If the size of your container or content changes:
 ```javascript
 $('#Demo').perfectScrollbar('update');
@@ -72,6 +98,12 @@ If you want to destory the scrollbar:
 $('#Demo').perfectScrollbar('destroy');
 ```
 
+If you want to scroll to somewhere, just use scroll-top css and update.
+```javascript
+$("#Demo").scrollTop(0);
+$("#Demo").perfectScrollbar('update');
+```
+
 Very helpful friends
 --------------------
 
@@ -82,13 +114,27 @@ If you want to make this plugin's update function more responsive, [jquery-resiz
 Contribution
 ------------
 
+#### Please read [Contributing](https://github.com/noraesae/perfect-scrollbar/wiki/Contributing) in the wiki before making any contibution.
+
+
 I *really* welcome contributions! Please feel free to fork and issue pull requests when...
 
 * You have a very nice idea to improve this plugin!
 * You found a bug!
 * You're good at English and can help my bad English!
 
-Also you can just open issues, and I can look into them.
+For IE problems, please refer to [IE Support](https://github.com/noraesae/perfect-scrollbar#ie-support)
+
+IE Support
+----------
+
+This plugin supports old IE browsers in the **minimum** range. The plugin is tested in IEs >= IE6 and works(not well, but works).
+
+**But the project will not accept the patches to fix IE problems in IE 6/7/8.**
+
+From jQuery 2.0, jQuery also will not support IE 6/7/8. I also think that supporting old browsers really breaks the web development conventions.
+
+When old IEs should be supported, please fork the project and make patches personally.
 
 License
 -------

build

@@ -1,3 +0,0 @@
-#!/bin/sh
-uglifyjs src/perfect-scrollbar.js > min/perfect-scrollbar.min.js
-cleancss src/perfect-scrollbar.css -o min/perfect-scrollbar.min.css

examples/options-default.html

@@ -0,0 +1,29 @@
+<!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.8.0/jquery.min.js"></script>
+      <script src="../src/jquery.mousewheel.js"></script>
+      <script src="../src/perfect-scrollbar.js"></script>
+      <style>
+        .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+        .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+        .spacer { text-align:center }
+      </style>
+    <script>
+      jQuery(document).ready(function ($) {
+        "use strict";
+        $('#Default').perfectScrollbar();
+      });
+    </script>
+  </head>
+  <body>
+    <div id="Default" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+  </body>
+</html>
+

examples/options-wheelPropagation.html

@@ -0,0 +1,40 @@
+<!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 - use wheelPropagation to control propagation of scrolling at extremities</title>
+      <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+      <script src="../src/jquery.mousewheel.js"></script>
+      <script src="../src/perfect-scrollbar.js"></script>
+      <style>
+        .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+        .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+        .spacer { text-align:center }
+      </style>
+    <script>
+      jQuery(document).ready(function ($) {
+        "use strict";
+        $('#Default').perfectScrollbar();
+        $('#NoWheelPropagation').perfectScrollbar({wheelPropagation:true});
+      });
+    </script>
+  </head>
+  <body>
+    <h1 style="text-align:center">Default; wheelPropagation:false</h1>
+    <div id="Default" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <h1 style="text-align:center">wheelPropagation:true</h1>
+    <div id="NoWheelPropagation" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <div class="spacer">
+      Note<br>that<br>there<br>is<br>plenty<br>of<br>text<br>after<br>the<br>image<br>to<br>ensure<br>that<br>it<br>is<br>possible<br>to<br>down<br>
+      after<br>the<br>bottom<br>of<br>the<br>image<br>has<br>been<br>reached<br>to<br>enable<br>the<br>wheel<br>propagation<br>to<br>be<br>tested<br>
+    </div>
+  </body>
+</html>
+

examples/options-wheelSpeed.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 - use wheelSpeed to change speed of scrolling</title>
+      <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+      <script src="../src/jquery.mousewheel.js"></script>
+      <script src="../src/perfect-scrollbar.js"></script>
+      <style>
+        .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+        .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+        .spacer { text-align:center }
+      </style>
+    <script>
+      jQuery(document).ready(function ($) {
+        "use strict";
+        $('#Default').perfectScrollbar();
+        $('#FastWheelSpeed').perfectScrollbar({wheelSpeed:100});
+        $('#SlowWheelSpeed').perfectScrollbar({wheelSpeed:1});
+      });
+    </script>
+  </head>
+  <body>
+    <h1 style="text-align:center">Default; wheelSpeed:10</h1>
+    <div id="Default" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <h1 style="text-align:center">Fast: wheelSpeed:100</h1>
+    <div id="FastWheelSpeed" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <h1 style="text-align:center">Slow: wheelSpeed:1</h1>
+    <div id="SlowWheelSpeed" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+  </body>
+</html>
+

examples/text-content.html

@@ -0,0 +1,45 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+
+    <title>Ul-content</title>
+    <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
+    <script src="../src/jquery.mousewheel.js"></script>
+    <script src="../src/perfect-scrollbar.js"></script>
+    <style>
+      #description {
+        border: 1px solid gray;
+        height:150px;
+        width: 400px;
+        overflow: hidden;
+        position: absolute;
+      }
+    </style>
+    <script type="text/javascript">
+      $(document).ready(function ($) {
+        $('#description').perfectScrollbar({
+          wheelSpeed: 20,
+          wheelPropagation: false
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="description" class="wrapper">
+      <div>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+        <p>The command takes options applicable</p>
+      </div>
+    </div>
+  </body>
+</html>

min/perfect-scrollbar-0.4.1.min.css

@@ -0,0 +1,5 @@
+/*! perfect-scrollbar - v0.4.1
+* 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)}

min/perfect-scrollbar-0.4.1.min.js

@@ -0,0 +1,4 @@
+/*! perfect-scrollbar - v0.4.1
+* http://noraesae.github.com/perfect-scrollbar/
+* Copyright (c) 2013 HyeonJe Jun; Licensed MIT */
+(function(e){var t={wheelSpeed:10,wheelPropagation:!1};e.fn.perfectScrollbar=function(o,r){return this.each(function(){var l=e.extend(!0,{},t);if("object"==typeof o?e.extend(!0,l,o):r=o,"update"===r)return e(this).data("perfect-scrollbar-update")&&e(this).data("perfect-scrollbar-update")(),e(this);if("destroy"===r)return e(this).data("perfect-scrollbar-destroy")&&e(this).data("perfect-scrollbar-destroy")(),e(this);if(e(this).data("perfect-scrollbar"))return e(this).data("perfect-scrollbar");var n,s,a,c,i,p,f,u,d=e(this).addClass("ps-container"),h=e("<div class='ps-scrollbar-x'></div>").appendTo(d),g=e("<div class='ps-scrollbar-y'></div>").appendTo(d),v=parseInt(h.css("bottom"),10),b=parseInt(g.css("right"),10),m=function(){var e=parseInt(u*c/s,10);d.scrollTop(e),h.css({bottom:v-e})},w=function(){var e=parseInt(p*a/n,10);d.scrollLeft(e),g.css({right:b-e})},T=function(){h.css({left:p+d.scrollLeft(),bottom:v-d.scrollTop(),width:i}),g.css({top:u+d.scrollTop(),right:b-d.scrollLeft(),height:f})},C=function(){n=d.width(),s=d.height(),a=d.prop("scrollWidth"),c=d.prop("scrollHeight"),a>n?(i=parseInt(n*n/a,10),p=parseInt(d.scrollLeft()*n/a,10)):(i=0,p=0,d.scrollLeft(0)),c>s?(f=parseInt(s*s/c,10),u=parseInt(d.scrollTop()*s/c,10)):(f=0,u=0,d.scrollTop(0)),u>=s-f&&(u=s-f),p>=n-i&&(p=n-i),T()},I=function(e,t){var o=e+t,r=n-i;p=0>o?0:o>r?r:o,h.css({left:p+d.scrollLeft()})},L=function(e,t){var o=e+t,r=s-f;u=0>o?0:o>r?r:o,g.css({top:u+d.scrollTop()})},y=function(){var t,o;h.bind("mousedown.perfect-scroll",function(e){o=e.pageX,t=h.position().left,h.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(document).bind("mousemove.perfect-scroll",function(e){h.hasClass("in-scrolling")&&(w(),I(t,e.pageX-o),e.stopPropagation(),e.preventDefault())}),e(document).bind("mouseup.perfect-scroll",function(){h.hasClass("in-scrolling")&&h.removeClass("in-scrolling")})},P=function(){var t,o;g.bind("mousedown.perfect-scroll",function(e){o=e.pageY,t=g.position().top,g.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(document).bind("mousemove.perfect-scroll",function(e){g.hasClass("in-scrolling")&&(m(),L(t,e.pageY-o),e.stopPropagation(),e.preventDefault())}),e(document).bind("mouseup.perfect-scroll",function(){g.hasClass("in-scrolling")&&g.removeClass("in-scrolling")})},D=function(){var e=function(e,t){var o=d.scrollTop();if(0===o&&t>0&&0===e)return!l.wheelPropagation;if(o>=c-s&&0>t&&0===e)return!l.wheelPropagation;var r=d.scrollLeft();return 0===r&&0>e&&0===t?!l.wheelPropagation:r>=a-n&&e>0&&0===t?!l.wheelPropagation:!0};d.bind("mousewheel.perfect-scroll",function(t,o,r,n){d.scrollTop(d.scrollTop()-n*l.wheelSpeed),d.scrollLeft(d.scrollLeft()+r*l.wheelSpeed),C(),e(r,n)&&t.preventDefault()})},X=function(){var t=function(e,t){d.scrollTop(d.scrollTop()-t),d.scrollLeft(d.scrollLeft()-e),C()},o={},r=0,l={},n=null,s=!1;e(window).bind("touchstart.perfect-scroll",function(){s=!0}),e(window).bind("touchend.perfect-scroll",function(){s=!1}),d.bind("touchstart.perfect-scroll",function(e){var t=e.originalEvent.targetTouches[0];o.pageX=t.pageX,o.pageY=t.pageY,r=(new Date).getTime(),null!==n&&clearInterval(n),e.stopPropagation()}),d.bind("touchmove.perfect-scroll",function(e){if(!s&&1===e.originalEvent.targetTouches.length){var n=e.originalEvent.targetTouches[0],a={};a.pageX=n.pageX,a.pageY=n.pageY;var c=a.pageX-o.pageX,i=a.pageY-o.pageY;t(c,i),o=a;var p=(new Date).getTime();l.x=c/(p-r),l.y=i/(p-r),r=p,e.preventDefault()}}),d.bind("touchend.perfect-scroll",function(){n=setInterval(function(){return.01>Math.abs(l.x)&&.01>Math.abs(l.y)?(clearInterval(n),void 0):(t(30*l.x,30*l.y),l.x*=.8,l.y*=.8,void 0)},10)})},Y=function(){h.remove(),g.remove(),d.unbind(".perfect-scroll"),e(window).unbind(".perfect-scroll"),d.data("perfect-scrollbar",null),d.data("perfect-scrollbar-update",null),d.data("perfect-scrollbar-destroy",null)},x=function(t){d.addClass("ie").addClass("ie"+t);var o=function(){var t=function(){e(this).addClass("hover")},o=function(){e(this).removeClass("hover")};d.bind("mouseenter.perfect-scroll",t).bind("mouseleave.perfect-scroll",o),h.bind("mouseenter.perfect-scroll",t).bind("mouseleave.perfect-scroll",o),g.bind("mouseenter.perfect-scroll",t).bind("mouseleave.perfect-scroll",o)},r=function(){T=function(){h.css({left:p+d.scrollLeft(),bottom:v,width:i}),g.css({top:u+d.scrollTop(),right:b,height:f}),h.hide().show(),g.hide().show()},m=function(){var e=parseInt(u*c/s,10);d.scrollTop(e),h.css({bottom:v}),h.hide().show()},w=function(){var e=parseInt(p*a/n,10);d.scrollLeft(e),g.hide().show()}};6===t&&(o(),r())},S=/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent),A=function(){var e=navigator.userAgent.toLowerCase().match(/(msie) ([\w.]+)/);e&&"msie"===e[1]&&x(parseInt(e[2],10)),C(),y(),P(),S&&X(),d.mousewheel&&D(),d.data("perfect-scrollbar",d),d.data("perfect-scrollbar-update",C),d.data("perfect-scrollbar-destroy",Y)};return A(),d})}})(jQuery);

min/perfect-scrollbar.min.css

@@ -1 +0,0 @@
-.ps-container .ps-scrollbar-x{position:absolute;bottom:3px;height:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;filter:alpha(opacity=0);-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-x{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-x.in-scrolling{opacity:.9;filter:alpha(opacity=90)}.ps-container .ps-scrollbar-y{position:absolute;right:3px;width:8px;background-color:#aaa;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;opacity:0;-webkit-transition:opacity.2s linear;-moz-transition:opacity .2s linear;transition:opacity .2s linear}.ps-container:hover .ps-scrollbar-y{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y:hover{opacity:.9;filter:alpha(opacity=90);cursor:default}.ps-container .ps-scrollbar-y.in-scrolling{opacity:.9;filter:alpha(opacity=90)}

min/perfect-scrollbar.min.js

@@ -1,3 +0,0 @@
-/* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
- * Licensed under the MIT License
- */(function(e){e.fn.perfectScrollbar=function(t){if(t==="update")return e(this).data("perfect_scrollbar_update")&&e(this).data("perfect_scrollbar_update")(),e(this);if(t==="destroy")return e(this).data("perfect_scrollbar_destroy")&&e(this).data("perfect_scrollbar_destroy")(),e(this);if(e(this).data("perfect_scrollbar"))return e(this).data("perfect_scrollbar");var n=e(this).addClass("ps-container"),r=e(this).children(),i=e("<div class='ps-scrollbar-x'></div>").appendTo(n),s=e("<div class='ps-scrollbar-y'></div>").appendTo(n),o,u,a,f,l,c,h=parseInt(i.css("bottom")),p,d,v=parseInt(s.css("right")),m=function(){var e=parseInt(d*f/u);n.scrollTop(e),i.css({bottom:h-e})},g=function(){var e=parseInt(c*a/o);n.scrollLeft(e),s.css({right:v-e})},y=function(){o=n.width(),u=n.height(),a=r.width(),f=r.height(),o<a?(l=parseInt(o*o/a),c=parseInt(n.scrollLeft()*o/a)):(l=0,c=0),u<f?(p=parseInt(u*u/f),d=parseInt(n.scrollTop()*u/f)):(p=0,scrollbar_y_left=0),i.css({left:c+n.scrollLeft(),bottom:h-n.scrollTop(),width:l}),s.css({top:d+n.scrollTop(),right:v-n.scrollLeft(),height:p})},b=function(e,t){var r=e+t,s=o-l;r<0?c=0:r>s?c=s:c=r,i.css({left:c+n.scrollLeft()})},w=function(e,t){var r=e+t,i=u-p;r<0?d=0:r>i?d=i:d=r,s.css({top:d+n.scrollTop()})},E=function(){var t,n;i.bind("mousedown.perfect-scroll",function(e){n=e.pageX,t=i.position().left,i.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){i.hasClass("in-scrolling")&&(b(t,e.pageX-n),g(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){i.hasClass("in-scrolling")&&i.removeClass("in-scrolling")})},S=function(){var t,n;s.bind("mousedown.perfect-scroll",function(e){n=e.pageY,t=s.position().top,s.addClass("in-scrolling"),e.stopPropagation(),e.preventDefault()}),e(window).bind("mousemove.perfect-scroll",function(e){s.hasClass("in-scrolling")&&(w(t,e.pageY-n),m(),e.stopPropagation(),e.preventDefault())}),e(window).bind("mouseup.perfect-scroll",function(e){s.hasClass("in-scrolling")&&s.removeClass("in-scrolling")})},x=function(){n.mousewheel(function(e,t,r,i){n.scrollTop(n.scrollTop()-i*10),n.scrollLeft(n.scrollLeft()+r*10),y(),(f>u||a>o)&&e.preventDefault()})},T=function(){i.remove(),s.remove(),n.unbind("mousewheel"),e(window).unbind("mousemove.perfect-scroll"),e(window).unbind("mouseup.perfect-scroll"),n.data("perfect_scrollbar",null),n.data("perfect_scrollbar_update",null),n.data("perfect_scrollbar_destroy",null)},N=function(){y(),E(),S(),n.mousewheel&&x(),n.data("perfect_scrollbar",n),n.data("perfect_scrollbar_update",y),n.data("perfect_scrollbar_destroy",T)};return N(),n}})(jQuery);

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "perfect-scrollbar",
+  "version": "0.4.1",
+  "engines": {
+    "node": ">= 0.8.0"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-jshint": "~0.1.1",
+    "grunt-contrib-uglify": "~0.1.1",
+    "grunt-contrib-cssmin": "~0.6.1",
+    "grunt-contrib-csslint": "~0.1.2",
+    "grunt-contrib-clean": "~0.4.1"
+  }
+}

perfect-scrollbar.jquery.json

@@ -0,0 +1,37 @@
+{
+  "name": "perfect-scrollbar",
+  "title": "perfect-scrollbar",
+  "description": "Tiny but perfect jquery scrollbar plugin.",
+  "version": "0.4.1",
+  "author": {
+    "name": "HyeonJe Jun",
+    "email": "noraesae@yuiazu.net",
+    "url": "https://github.com/noraesae/"
+  },
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/noraesae/perfect-scrollbar#license"
+    }
+  ],
+  "dependencies": {
+    "jquery": ">=1.8"
+  },
+  "keywords": [
+    "ui",
+    "scroll",
+    "scrollbar"
+  ],
+  "homepage": "http://noraesae.github.com/perfect-scrollbar/",
+  "docs": "https://github.com/noraesae/perfect-scrollbar/",
+  "download": "http://noraesae.github.com/perfect-scrollbar/",
+  "demo": "http://noraesae.github.com/perfect-scrollbar/",
+  "bugs": "https://github.com/noraesae/perfect-scrollbar/issues/",
+  "maintainers": [
+    {
+      "name": "HyeonJe Jun",
+      "email": "noraesae@yuiazu.net",
+      "url": "https://github.com/noraesae/"
+    }
+  ]
+}

src/jquery.mousewheel.js

@@ -0,0 +1,84 @@
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+    for ( var i=types.length; i; ) {
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+    }
+}
+
+$.event.special.mousewheel = {
+    setup: function() {
+        if ( this.addEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.addEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = handler;
+        }
+    },
+    
+    teardown: function() {
+        if ( this.removeEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.removeEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = null;
+        }
+    }
+};
+
+$.fn.extend({
+    mousewheel: function(fn) {
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+    },
+    
+    unmousewheel: function(fn) {
+        return this.unbind("mousewheel", fn);
+    }
+});
+
+
+function handler(event) {
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+    event = $.event.fix(orgEvent);
+    event.type = "mousewheel";
+    
+    // Old school scrollwheel delta
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
+    
+    // New school multidimensional scroll (touchpads) deltas
+    deltaY = delta;
+    
+    // Gecko
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+        deltaY = 0;
+        deltaX = -1*delta;
+    }
+    
+    // Webkit
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+    
+    // Add event and delta to the front of the arguments
+    args.unshift(event, delta, deltaX, deltaY);
+    
+    return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);

src/perfect-scrollbar.css

@@ -3,22 +3,29 @@
     bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x */
     height: 8px;
     background-color: #aaa;
-    border-radius: 4px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
+    border-radius: 4px;
     opacity: 0;
     filter: alpha(opacity = 0);
+    -o-transition: opacity .2s linear;
     -webkit-transition: opacity.2s linear;
     -moz-transition: opacity .2s linear;
     transition: opacity .2s linear;
 }
 
-.ps-container:hover .ps-scrollbar-x {
+.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,
+.ps-container .ps-scrollbar-x.hover {
     opacity: 0.9;
     filter: alpha(opacity = 90);
     cursor:default;
@@ -34,21 +41,29 @@
     right: 3px; /* there must be 'right' for ps-scrollbar-y */
     width: 8px;
     background-color: #aaa;
-    border-radius: 4px;
     -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:hover .ps-scrollbar-y {
+.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,
+.ps-container .ps-scrollbar-y.hover {
     opacity: 0.9;
     filter: alpha(opacity = 90);
     cursor: default;

src/perfect-scrollbar.js

@@ -1,206 +1,384 @@
 /* Copyright (c) 2012 HyeonJe Jun (http://github.com/noraesae)
  * Licensed under the MIT License
  */
-((function($) {
-    $.fn.perfectScrollbar = function(option) {
-        if(option === 'update') {
-            if($(this).data('perfect_scrollbar_update')) {
-                $(this).data('perfect_scrollbar_update')();
-            }
-            return $(this);
+((function ($) {
+
+  // The default settings for the plugin
+  var defaultSettings = {
+    wheelSpeed: 10,
+    wheelPropagation: false
+  };
+
+  $.fn.perfectScrollbar = function (suppliedSettings, option) {
+
+    return this.each(function () {
+      // Use the default settings
+      var settings = $.extend(true, {}, defaultSettings);
+      if (typeof suppliedSettings === "object") {
+        // But over-ride any supplied
+        $.extend(true, settings, suppliedSettings);
+      } else {
+        // If no settings were supplied, then the first param must be the option
+        option = suppliedSettings;
+      }
+
+      if (option === 'update') {
+        if ($(this).data('perfect-scrollbar-update')) {
+          $(this).data('perfect-scrollbar-update')();
         }
-        else if(option === 'destroy') {
-            if($(this).data('perfect_scrollbar_destroy')) {
-                $(this).data('perfect_scrollbar_destroy')();
-            }
-            return $(this);
+        return $(this);
+      }
+      else if (option === 'destroy') {
+        if ($(this).data('perfect-scrollbar-destroy')) {
+          $(this).data('perfect-scrollbar-destroy')();
+        }
+        return $(this);
+      }
+
+      if ($(this).data('perfect-scrollbar')) {
+        // if there's already perfect-scrollbar
+        return $(this).data('perfect-scrollbar');
+      }
+
+      var $this = $(this).addClass('ps-container'),
+          $scrollbarX = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
+          $scrollbarY = $("<div class='ps-scrollbar-y'></div>").appendTo($this),
+          containerWidth,
+          containerHeight,
+          contentWidth,
+          contentHeight,
+          scrollbarXWidth,
+          scrollbarXLeft,
+          scrollbarXBottom = parseInt($scrollbarX.css('bottom'), 10),
+          scrollbarYHeight,
+          scrollbarYTop,
+          scrollbarYRight = parseInt($scrollbarY.css('right'), 10);
+
+      var updateContentScrollTop = function () {
+        var scrollTop = parseInt(scrollbarYTop * contentHeight / containerHeight, 10);
+        $this.scrollTop(scrollTop);
+        $scrollbarX.css({bottom: scrollbarXBottom - scrollTop});
+      };
+
+      var updateContentScrollLeft = function () {
+        var scrollLeft = parseInt(scrollbarXLeft * contentWidth / containerWidth, 10);
+        $this.scrollLeft(scrollLeft);
+        $scrollbarY.css({right: scrollbarYRight - scrollLeft});
+      };
+
+      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});
+      };
+
+      var updateBarSizeAndPosition = function () {
+        containerWidth = $this.width();
+        containerHeight = $this.height();
+        contentWidth = $this.prop('scrollWidth');
+        contentHeight = $this.prop('scrollHeight');
+        if (containerWidth < contentWidth) {
+          scrollbarXWidth = parseInt(containerWidth * containerWidth / contentWidth, 10);
+          scrollbarXLeft = parseInt($this.scrollLeft() * containerWidth / contentWidth, 10);
+        }
+        else {
+          scrollbarXWidth = 0;
+          scrollbarXLeft = 0;
+          $this.scrollLeft(0);
+        }
+        if (containerHeight < contentHeight) {
+          scrollbarYHeight = parseInt(containerHeight * containerHeight / contentHeight, 10);
+          scrollbarYTop = parseInt($this.scrollTop() * containerHeight / contentHeight, 10);
+        }
+        else {
+          scrollbarYHeight = 0;
+          scrollbarYTop = 0;
+          $this.scrollTop(0);
         }
 
-        if($(this).data('perfect_scrollbar')) {
-            // if there's already perfect_scrollbar
-            return $(this).data('perfect_scrollbar');
+        if (scrollbarYTop >= containerHeight - scrollbarYHeight) {
+          scrollbarYTop = containerHeight - scrollbarYHeight;
+        }
+        if (scrollbarXLeft >= containerWidth - scrollbarXWidth) {
+          scrollbarXLeft = containerWidth - scrollbarXWidth;
         }
 
-        var $this = $(this).addClass('ps-container'),
-            $content = $(this).children(),
-            $scrollbar_x = $("<div class='ps-scrollbar-x'></div>").appendTo($this),
-            $scrollbar_y = $("<div class='ps-scrollbar-y'></div>").appendTo($this),
-            container_width,
-            container_height,
-            content_width,
-            content_height,
-            scrollbar_x_width,
-            scrollbar_x_left,
-            scrollbar_x_bottom = parseInt($scrollbar_x.css('bottom')),
-            scrollbar_y_height,
-            scrollbar_y_top,
-            scrollbar_y_right = parseInt($scrollbar_y.css('right'));
+        updateScrollbarCss();
+      };
 
-        var updateContentScrollTop = function() {
-            var scroll_top = parseInt(scrollbar_y_top * content_height / container_height);
-            $this.scrollTop(scroll_top);
-            $scrollbar_x.css({bottom: scrollbar_x_bottom - scroll_top});
+      var 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) {
+          currentPageX = e.pageX;
+          currentLeft = $scrollbarX.position().left;
+          $scrollbarX.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);
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        });
+
+        $(document).bind('mouseup.perfect-scroll', function (e) {
+          if ($scrollbarX.hasClass('in-scrolling')) {
+            $scrollbarX.removeClass('in-scrolling');
+          }
+        });
+      };
+
+      var bindMouseScrollYHandler = function () {
+        var currentTop,
+            currentPageY;
+
+        $scrollbarY.bind('mousedown.perfect-scroll', function (e) {
+          currentPageY = e.pageY;
+          currentTop = $scrollbarY.position().top;
+          $scrollbarY.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);
+            e.stopPropagation();
+            e.preventDefault();
+          }
+        });
+
+        $(document).bind('mouseup.perfect-scroll', function (e) {
+          if ($scrollbarY.hasClass('in-scrolling')) {
+            $scrollbarY.removeClass('in-scrolling');
+          }
+        });
+      };
+
+      // bind handlers
+      var bindMouseWheelHandler = function () {
+        var shouldPreventDefault = function (deltaX, deltaY) {
+          var scrollTop = $this.scrollTop();
+          if (scrollTop === 0 && deltaY > 0 && deltaX === 0) {
+            return !settings.wheelPropagation;
+          }
+          else if (scrollTop >= 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;
         };
 
-        var updateContentScrollLeft = function() {
-            var scroll_left = parseInt(scrollbar_x_left * content_width / container_width);
-            $this.scrollLeft(scroll_left);
-            $scrollbar_y.css({right: scrollbar_y_right - scroll_left});
+        $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)) {
+            e.preventDefault();
+          }
+        });
+      };
+
+      // bind mobile touch handler
+      var bindMobileTouchHandler = function () {
+        var applyTouchMove = function (differenceX, differenceY) {
+          $this.scrollTop($this.scrollTop() - differenceY);
+          $this.scrollLeft($this.scrollLeft() - differenceX);
+
+          // update bar position
+          updateBarSizeAndPosition();
         };
 
-        var updateBarSizeAndPosition = function() {
-            container_width = $this.width();
-            container_height = $this.height();
-            content_width = $content.width();
-            content_height = $content.height();
-            if(container_width < content_width) {
-                scrollbar_x_width = parseInt(container_width * container_width / content_width);
-                scrollbar_x_left = parseInt($this.scrollLeft() * container_width / content_width);
-            }
-            else {
-                scrollbar_x_width = 0;
-                scrollbar_x_left = 0;
-            }
-            if(container_height < content_height) {
-                scrollbar_y_height = parseInt(container_height * container_height / content_height);
-                scrollbar_y_top = parseInt($this.scrollTop() * container_height / content_height);
-            }
-            else {
-                scrollbar_y_height = 0;
-                scrollbar_y_left = 0;
+        var startCoords = {},
+            startTime = 0,
+            speed = {},
+            breakingProcess = null,
+            inGlobalTouch = false;
+
+        $(window).bind("touchstart.perfect-scroll", function (e) {
+          inGlobalTouch = true;
+        });
+        $(window).bind("touchend.perfect-scroll", function (e) {
+          inGlobalTouch = false;
+        });
+
+        $this.bind("touchstart.perfect-scroll", function (e) {
+          var touch = e.originalEvent.targetTouches[0];
+
+          startCoords.pageX = touch.pageX;
+          startCoords.pageY = touch.pageY;
+
+          startTime = (new Date()).getTime();
+
+          if (breakingProcess !== null) {
+            clearInterval(breakingProcess);
+          }
+
+          e.stopPropagation();
+        });
+        $this.bind("touchmove.perfect-scroll", function (e) {
+          if (!inGlobalTouch && e.originalEvent.targetTouches.length === 1) {
+            var touch = e.originalEvent.targetTouches[0];
+
+            var currentCoords = {};
+            currentCoords.pageX = touch.pageX;
+            currentCoords.pageY = touch.pageY;
+
+            var differenceX = currentCoords.pageX - startCoords.pageX,
+              differenceY = currentCoords.pageY - startCoords.pageY;
+
+            applyTouchMove(differenceX, differenceY);
+            startCoords = currentCoords;
+
+            var currentTime = (new Date()).getTime();
+            speed.x = differenceX / (currentTime - startTime);
+            speed.y = differenceY / (currentTime - startTime);
+            startTime = currentTime;
+
+            e.preventDefault();
+          }
+        });
+        $this.bind("touchend.perfect-scroll", function (e) {
+          breakingProcess = setInterval(function () {
+            if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
+              clearInterval(breakingProcess);
+              return;
             }
 
-            $scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft(), bottom: scrollbar_x_bottom - $this.scrollTop(), width: scrollbar_x_width});
-            $scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop(), right: scrollbar_y_right - $this.scrollLeft(), height: scrollbar_y_height});
+            applyTouchMove(speed.x * 30, speed.y * 30);
+
+            speed.x *= 0.8;
+            speed.y *= 0.8;
+          }, 10);
+        });
+      };
+
+      var destroy = function () {
+        $scrollbarX.remove();
+        $scrollbarY.remove();
+        $this.unbind('.perfect-scroll');
+        $(window).unbind('.perfect-scroll');
+        $this.data('perfect-scrollbar', null);
+        $this.data('perfect-scrollbar-update', null);
+        $this.data('perfect-scrollbar-destroy', null);
+      };
+
+      var ieSupport = function (version) {
+        $this.addClass('ie').addClass('ie' + version);
+
+        var bindHoverHandlers = function () {
+          var mouseenter = function () {
+            $(this).addClass('hover');
+          };
+          var mouseleave = function () {
+            $(this).removeClass('hover');
+          };
+          $this.bind('mouseenter.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);
         };
 
-        var moveBarX = function(current_left, delta_x) {
-            var new_left = current_left + delta_x,
-                max_left = container_width - scrollbar_x_width;
+        var fixIe6ScrollbarPosition = function () {
+          updateScrollbarCss = function () {
+            $scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft(), bottom: scrollbarXBottom, width: scrollbarXWidth});
+            $scrollbarY.css({top: scrollbarYTop + $this.scrollTop(), right: scrollbarYRight, height: scrollbarYHeight});
+            $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(new_left < 0) {
-                scrollbar_x_left = 0;
-            }
-            else if(new_left > max_left) {
-                scrollbar_x_left = max_left;
-            }
-            else {
-                scrollbar_x_left = new_left;
-            }
-            $scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft()});
+        if (version === 6) {
+          bindHoverHandlers();
+          fixIe6ScrollbarPosition();
+        }
+      };
+
+      var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
+
+      var initialize = function () {
+        var ieMatch = navigator.userAgent.toLowerCase().match(/(msie) ([\w.]+)/);
+        if (ieMatch && ieMatch[1] === 'msie') {
+          // must be executed at first, because 'ieSupport' may addClass to the container
+          ieSupport(parseInt(ieMatch[2], 10));
         }
 
-        var moveBarY = function(current_top, delta_y) {
-            var new_top = current_top + delta_y,
-                max_top = container_height - scrollbar_y_height;
+        updateBarSizeAndPosition();
+        bindMouseScrollXHandler();
+        bindMouseScrollYHandler();
+        if (isMobile) {
+          bindMobileTouchHandler();
+        }
+        if ($this.mousewheel) {
+          bindMouseWheelHandler();
+        }
+        $this.data('perfect-scrollbar', $this);
+        $this.data('perfect-scrollbar-update', updateBarSizeAndPosition);
+        $this.data('perfect-scrollbar-destroy', destroy);
+      };
 
-            if(new_top < 0) {
-                scrollbar_y_top = 0;
-            }
-            else if(new_top > max_top) {
-                scrollbar_y_top = max_top;
-            }
-            else {
-                scrollbar_y_top = new_top;
-            }
-            $scrollbar_y.css({top: scrollbar_y_top + $this.scrollTop()});
-        };
+      // initialize
+      initialize();
 
-        var bindMouseScrollXHandler = function() {
-            var current_left,
-                current_page_x;
-
-            $scrollbar_x.bind('mousedown.perfect-scroll', function(e) {
-                current_page_x = e.pageX;
-                current_left = $scrollbar_x.position().left;
-                $scrollbar_x.addClass('in-scrolling');
-                e.stopPropagation();
-                e.preventDefault();
-            });
-
-            $(window).bind('mousemove.perfect-scroll', function(e) {
-                if($scrollbar_x.hasClass('in-scrolling')) {
-                    moveBarX(current_left, e.pageX - current_page_x);
-                    updateContentScrollLeft();
-                    e.stopPropagation();
-                    e.preventDefault();
-                }
-            });
-
-            $(window).bind('mouseup.perfect-scroll', function(e) {
-                if($scrollbar_x.hasClass('in-scrolling')) {
-                    $scrollbar_x.removeClass('in-scrolling');
-                }
-            });
-        };
-
-        var bindMouseScrollYHandler = function() {
-            var current_top,
-                current_page_y;
-
-            $scrollbar_y.bind('mousedown.perfect-scroll', function(e) {
-                current_page_y = e.pageY;
-                current_top = $scrollbar_y.position().top;
-                $scrollbar_y.addClass('in-scrolling');
-                e.stopPropagation();
-                e.preventDefault();
-            });
-
-            $(window).bind('mousemove.perfect-scroll', function(e) {
-                if($scrollbar_y.hasClass('in-scrolling')) {
-                    moveBarY(current_top, e.pageY - current_page_y);
-                    updateContentScrollTop();
-                    e.stopPropagation();
-                    e.preventDefault();
-                }
-            });
-
-            $(window).bind('mouseup.perfect-scroll', function(e) {
-                if($scrollbar_y.hasClass('in-scrolling')) {
-                    $scrollbar_y.removeClass('in-scrolling');
-                }
-            });
-        };
-
-        // bind handlers
-        var bindMouseWheelHandler = function() {
-            $this.mousewheel(function(e, delta, deltaX, deltaY) {
-                $this.scrollTop($this.scrollTop() - (deltaY * 10));
-                $this.scrollLeft($this.scrollLeft() + (deltaX * 10));
-
-                // update bar position
-                updateBarSizeAndPosition();
-
-                if(content_height > container_height || content_width > container_width) {
-                    e.preventDefault();
-                }
-            });
-        };
-
-        var destroy = function() {
-            $scrollbar_x.remove();
-            $scrollbar_y.remove();
-            $this.unbind('mousewheel');
-            $(window).unbind('mousemove.perfect-scroll');
-            $(window).unbind('mouseup.perfect-scroll');
-            $this.data('perfect_scrollbar', null);
-            $this.data('perfect_scrollbar_update', null);
-            $this.data('perfect_scrollbar_destroy', null);
-        };
-
-        var initialize = function() {
-            updateBarSizeAndPosition();
-            bindMouseScrollXHandler();
-            bindMouseScrollYHandler();
-            if($this.mousewheel) bindMouseWheelHandler();
-            $this.data('perfect_scrollbar', $this);
-            $this.data('perfect_scrollbar_update', updateBarSizeAndPosition);
-            $this.data('perfect_scrollbar_destroy', destroy);
-        };
-
-        // initialize
-        initialize();
-
-        return $this;
-    };
+      return $this;
+    });
+  };
 })(jQuery));