Release 0.5.8

1. Improve mouse handler logic. 2. Add rail margin detection. 3. Add swipePropagation option. 4. Bug fixes.
Update README.md
2014-12-02 11:40:46 +00:00 · 2014-12-02 11:38:54 +00:00 · 2014-12-02 11:34:45 +00:00 · 2014-12-02 11:34:07 +00:00 · 2014-12-02 11:24:36 +00:00 · 2014-12-02 11:00:37 +00:00
13 changed files with 483 additions and 205 deletions
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,6 +1,7 @@
 'use strict';

 module.exports = function (grunt) {
+  require('load-grunt-tasks')(grunt);

  // Project configuration.
  grunt.initConfig({
@@ -38,15 +39,6 @@ module.exports = function (grunt) {
        src: 'src/perfect-scrollbar.js'
      }
    },
-    csslint: {
-      strict: {
-        options: {
-          csslintrc: '.csslintrc',
-          'import': 2
-        },
-        src: ['src/perfect-scrollbar.css']
-      }
-    },
    cssmin: {
      options: {
        banner: '<%= banner %>'
@@ -67,17 +59,16 @@ module.exports = function (grunt) {
        createTag: false,
        push: false
      }
+    },
+    sass: {
+      dist: {
+        files: {
+          'src/perfect-scrollbar.css': 'src/perfect-scrollbar.scss'
+        }
+      }
    }
  });

-  // 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.loadNpmTasks('grunt-bump');
-
  grunt.registerTask('default', 'List commands', function () {
    grunt.log.writeln("");

@@ -85,12 +76,11 @@ module.exports = function (grunt) {
    grunt.log.writeln("Run 'grunt build' to minify the source files");
  });

-  grunt.registerTask('lint', ['jshint', 'csslint']);
-  grunt.registerTask('build', ['clean', 'uglify', 'cssmin']);
+  grunt.registerTask('lint', ['jshint']);
+  grunt.registerTask('build', ['clean', 'uglify', 'sass', 'cssmin']);
  grunt.registerTask('travis', ['lint']);
  grunt.registerTask('release', 'Release a new version', function (arg) {
    var bumpType = arg ? ':' + arg : '';
    grunt.task.run(['lint', 'bump' + bumpType, 'build']);
  });
-
 };
--- a/README.md
+++ b/README.md
@@ -86,10 +86,12 @@ The scroll speed applied to mousewheel event.
 **Default: 1**

 ### 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*  
+If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element.  
 **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**

 ### minScrollbarLength
 When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels.  
@@ -203,6 +205,8 @@ Helpdesk

 If you have any idea to improve this project or any problem using this, please feel free to upload an [issue](https://github.com/noraesae/perfect-scrollbar/issues).

+For the problems frequently asked, there's a [FAQ](https://github.com/noraesae/perfect-scrollbar/wiki/FAQ) wiki page. Please check the page before uploading an issue.
+
 License
 -------

--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
  "name": "perfect-scrollbar",
-  "version": "0.5.6",
+  "version": "0.5.8",
  "homepage": "http://noraesae.github.io/perfect-scrollbar/",
  "authors": [
    "Hyunje Alex Jun <me@noraesae.net>"
--- a/examples/always-visible.html
+++ b/examples/always-visible.html
@@ -0,0 +1,41 @@
+<!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/perfect-scrollbar.js"></script>
+      <style>
+        h1 { text-align: center; }
+        .container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+        .container .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+      </style>
+      <style>
+        /* to make scrollbars always visible */
+        .always-visible.ps-container > .ps-scrollbar-x-rail,
+        .always-visible.ps-container > .ps-scrollbar-y-rail {
+          opacity: 0.6;
+        }
+      </style>
+    <script>
+      jQuery(document).ready(function ($) {
+        "use strict";
+        $('.container').perfectScrollbar();
+      });
+    </script>
+  </head>
+  <body>
+    <h1>Default</h1>
+    <div class="container">
+      <div class="content">
+      </div>
+    </div>
+
+    <h1>Always visible</h1>
+    <div class="container always-visible">
+      <div class="content">
+      </div>
+    </div>
+  </body>
+</html>
--- a/examples/removable-list-element.html
+++ b/examples/removable-list-element.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+
+    <title>perfect-scrollbar example</title>
+    <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
+    <script src="../src/perfect-scrollbar.js"></script>
+    <style>
+      #test {
+        border: 1px solid gray;
+        max-height: 300px;
+        width: 400px;
+        overflow: hidden;
+        position: relative;
+      }
+      #test .element {
+        margin: 1px;
+        background-color: #cec;
+        height: 44px;
+        line-height: 44px;
+      }
+    </style>
+    <script type="text/javascript">
+      $(document).ready(function ($) {
+        var test = $('#test');
+        test.perfectScrollbar();
+        test.find('a').click(function () {
+          $(this).parent().remove();
+          test.perfectScrollbar('update');
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="test" class="wrapper">
+      <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
+      <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
+      <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
+      <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
+      <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
+      <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
+      <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
+      <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
+      <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
+      <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
+      <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
+      <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
+    </div>
+  </body>
+</html>
--- a/examples/scrollbars-with-margin.html
+++ b/examples/scrollbars-with-margin.html
@@ -0,0 +1,34 @@
+<!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/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 }
+
+        .ps-scrollbar-x-rail {
+          margin: 0 3px;
+        }
+        .ps-scrollbar-y-rail {
+          margin: 3px 0;
+        }
+      </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>
--- a/min/perfect-scrollbar.min.css
+++ b/min/perfect-scrollbar.min.css
@@ -1,5 +1,5 @@
-/*! perfect-scrollbar - v0.5.6
+/*! perfect-scrollbar - v0.5.8
 * http://noraesae.github.com/perfect-scrollbar/
 * Copyright (c) 2014 Hyunje Alex Jun; Licensed MIT */

-.ps-container>.ps-scrollbar-x-rail{display:none;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.ps-active-x>.ps-scrollbar-x-rail{display:block}.ps-container:hover>.ps-scrollbar-x-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-x-rail.in-scrolling{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-y-rail{display:block;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.ps-active-y>.ps-scrollbar-y-rail{display:block}.ps-container:hover>.ps-scrollbar-y-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-x-rail>.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>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container>.ps-scrollbar-y-rail>.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>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999}
+.ps-container.ps-active-x>.ps-scrollbar-x-rail,.ps-container.ps-active-y>.ps-scrollbar-y-rail{display:block}.ps-container>.ps-scrollbar-x-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;-o-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;bottom:3px;height:8px}.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;bottom:0;height:8px}.ps-container>.ps-scrollbar-x-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container>.ps-scrollbar-y-rail{display:none;position:absolute;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;opacity:0;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);-webkit-transition:background-color .2s linear,opacity .2s linear;-moz-transition:background-color .2s linear,opacity .2s linear;-o-transition:background-color .2s linear,opacity .2s linear;transition:background-color .2s linear,opacity .2s linear;right:3px;width:8px}.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y{position:absolute;background-color:#aaa;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;-webkit-transition:background-color .2s linear;-moz-transition:background-color .2s linear;-o-transition:background-color .2s linear;transition:background-color .2s linear;right:0;width:8px}.ps-container>.ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail,.ps-container:hover>.ps-scrollbar-y-rail{opacity:.6;-ms-filter:"alpha(Opacity=60)";filter:alpha(opacity=60)}.ps-container:hover>.ps-scrollbar-x-rail.in-scrolling,.ps-container:hover>.ps-scrollbar-y-rail.in-scrolling{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail:hover{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x{background-color:#999}.ps-container:hover>.ps-scrollbar-y-rail:hover{background-color:#eee;opacity:.9;-ms-filter:"alpha(Opacity=90)";filter:alpha(opacity=90)}.ps-container:hover>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y{background-color:#999}
--- a/min/perfect-scrollbar.min.js
+++ b/min/perfect-scrollbar.min.js
--- a/package.json
+++ b/package.json
@@ -1,12 +1,14 @@
 {
  "name": "perfect-scrollbar",
-  "version": "0.5.6",
+  "version": "0.5.8",
  "description": "Tiny but perfect jquery scrollbar plugin.",
  "author": "Hyunje Alex Jun <me@noraesae.net>",
-  "contributors": [{
-    "name": "Hyunje Alex Jun",
-    "email": "me@noraesae.net"
-  }],
+  "contributors": [
+    {
+      "name": "Hyunje Alex Jun",
+      "email": "me@noraesae.net"
+    }
+  ],
  "main": "src/perfect-scrollbar.js",
  "repository": {
    "type": "git",
@@ -30,7 +32,9 @@
    "grunt-contrib-csslint": "~0.1.2",
    "grunt-contrib-cssmin": "~0.6.1",
    "grunt-contrib-jshint": "~0.1.1",
-    "grunt-contrib-uglify": "~0.1.1"
+    "grunt-contrib-uglify": "~0.1.1",
+    "grunt-sass": "^0.16.1",
+    "load-grunt-tasks": "^1.0.0"
  },
  "scripts": {
    "test": "grunt travis --verbose"
--- 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.5.6",
+  "version": "0.5.8",
  "author": {
    "name": "Hyunje Alex Jun",
    "email": "me@noraesae.net",
--- a/src/perfect-scrollbar.css
+++ b/src/perfect-scrollbar.css
@@ -1,109 +1,101 @@
-.ps-container>.ps-scrollbar-x-rail {
-    display: none;
-    position: absolute; /* please don't change 'position' */
-    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
-    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.ps-active-x>.ps-scrollbar-x-rail {
-    display: block;
-}
-
-.ps-container:hover>.ps-scrollbar-x-rail {
-    opacity: 0.6;
-    filter: alpha(opacity=60);
-}
-
-.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 {
-    background-color: #eee;
-    opacity: 0.9;
-    filter: alpha(opacity=90);
-}
-
-.ps-container>.ps-scrollbar-y-rail {
-    display: block;
-    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.ps-active-y>.ps-scrollbar-y-rail {
-    display: block;
-}
-
-.ps-container:hover>.ps-scrollbar-y-rail {
-    opacity: 0.6;
-    filter: alpha(opacity=60);
-}
-
-.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 {
-    background-color: #eee;
-    opacity: 0.9;
-    filter: alpha(opacity=90);
-}
-
-.ps-container>.ps-scrollbar-x-rail>.ps-scrollbar-x {
-    position: absolute; /* please don't change 'position' */
-    bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */
-    height: 8px;
+.ps-container.ps-active-x > .ps-scrollbar-x-rail, .ps-container.ps-active-y > .ps-scrollbar-y-rail {
+  display: block; }
+.ps-container > .ps-scrollbar-x-rail {
+  display: none;
+  position: absolute;
+  /* please don't change 'position' */
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  border-radius: 4px;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+  -moz-transition: background-color 0.2s linear, opacity 0.2s linear;
+  -o-transition: background-color 0.2s linear, opacity 0.2s linear;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  bottom: 3px;
+  /* there must be 'bottom' for ps-scrollbar-x-rail */
+  height: 8px; }
+  .ps-container > .ps-scrollbar-x-rail > .ps-scrollbar-x {
+    position: absolute;
+    /* please don't change 'position' */
    background-color: #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
+    -ms-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>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x {
-    background-color: #999;
-}
-
-.ps-container>.ps-scrollbar-y-rail>.ps-scrollbar-y {
-    position: absolute; /* please don't change 'position' */
-    right: 0; /* there must be 'right' for ps-scrollbar-y */
-    width: 8px;
+    -webkit-transition: background-color 0.2s linear;
+    -moz-transition: background-color 0.2s linear;
+    -o-transition: background-color 0.2s linear;
+    transition: background-color 0.2s linear;
+    bottom: 0;
+    /* there must be 'bottom' for ps-scrollbar-x */
+    height: 8px; }
+  .ps-container > .ps-scrollbar-x-rail.in-scrolling {
+    background-color: #eee;
+    opacity: 0.9;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+    filter: alpha(opacity=90); }
+.ps-container > .ps-scrollbar-y-rail {
+  display: none;
+  position: absolute;
+  /* please don't change 'position' */
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  border-radius: 4px;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  -webkit-transition: background-color 0.2s linear, opacity 0.2s linear;
+  -moz-transition: background-color 0.2s linear, opacity 0.2s linear;
+  -o-transition: background-color 0.2s linear, opacity 0.2s linear;
+  transition: background-color 0.2s linear, opacity 0.2s linear;
+  right: 3px;
+  /* there must be 'right' for ps-scrollbar-y-rail */
+  width: 8px; }
+  .ps-container > .ps-scrollbar-y-rail > .ps-scrollbar-y {
+    position: absolute;
+    /* please don't change 'position' */
    background-color: #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
+    -ms-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>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y {
-    background-color: #999;
-}
+    -webkit-transition: background-color 0.2s linear;
+    -moz-transition: background-color 0.2s linear;
+    -o-transition: background-color 0.2s linear;
+    transition: background-color 0.2s linear;
+    right: 0;
+    /* there must be 'right' for ps-scrollbar-y */
+    width: 8px; }
+  .ps-container > .ps-scrollbar-y-rail.in-scrolling {
+    background-color: #eee;
+    opacity: 0.9;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+    filter: alpha(opacity=90); }
+.ps-container:hover > .ps-scrollbar-x-rail, .ps-container:hover > .ps-scrollbar-y-rail {
+  opacity: 0.6;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+  filter: alpha(opacity=60); }
+  .ps-container:hover > .ps-scrollbar-x-rail.in-scrolling, .ps-container:hover > .ps-scrollbar-y-rail.in-scrolling {
+    background-color: #eee;
+    opacity: 0.9;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+    filter: alpha(opacity=90); }
+.ps-container:hover > .ps-scrollbar-x-rail:hover {
+  background-color: #eee;
+  opacity: 0.9;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+  filter: alpha(opacity=90); }
+  .ps-container:hover > .ps-scrollbar-x-rail:hover > .ps-scrollbar-x {
+    background-color: #999; }
+.ps-container:hover > .ps-scrollbar-y-rail:hover {
+  background-color: #eee;
+  opacity: 0.9;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+  filter: alpha(opacity=90); }
+  .ps-container:hover > .ps-scrollbar-y-rail:hover > .ps-scrollbar-y {
+    background-color: #999; }
--- a/src/perfect-scrollbar.js
+++ b/src/perfect-scrollbar.js
@@ -17,7 +17,7 @@
 })(function ($) {
  'use strict';

-  function int(x) {
+  function getInt(x) {
    if (typeof x === 'string') {
      return parseInt(x, 10);
    } else {
@@ -28,6 +28,7 @@
  var defaultSettings = {
    wheelSpeed: 1,
    wheelPropagation: false,
+    swipePropagation: true,
    minScrollbarLength: null,
    maxScrollbarLength: null,
    useBothWheelAxes: false,
@@ -52,11 +53,14 @@
    };
  };

+  var isWebkit = 'WebkitAppearance' in document.documentElement.style;
+
  $.fn.perfectScrollbar = function (suppliedSettings, option) {

    return this.each(function () {
      var settings = $.extend(true, {}, defaultSettings);
      var $this = $(this);
+      var isPluginAlive = function () { return !!$this; };

      if (typeof suppliedSettings === "object") {
        // Override default settings with any supplied
@@ -104,20 +108,24 @@
      var scrollbarXActive;
      var scrollbarXWidth;
      var scrollbarXLeft;
-      var scrollbarXBottom = int($scrollbarXRail.css('bottom'));
+      var scrollbarXBottom = getInt($scrollbarXRail.css('bottom'));
      var isScrollbarXUsingBottom = scrollbarXBottom === scrollbarXBottom; // !isNaN
-      var scrollbarXTop = isScrollbarXUsingBottom ? null : int($scrollbarXRail.css('top'));
-      var railBorderXWidth = int($scrollbarXRail.css('borderLeftWidth')) + int($scrollbarXRail.css('borderRightWidth'));
+      var scrollbarXTop = isScrollbarXUsingBottom ? null : getInt($scrollbarXRail.css('top'));
+      var railBorderXWidth = getInt($scrollbarXRail.css('borderLeftWidth')) + getInt($scrollbarXRail.css('borderRightWidth'));
+      var railXMarginWidth = getInt($scrollbarXRail.css('marginLeft')) + getInt($scrollbarXRail.css('marginRight'));
+      var railXWidth;

      var $scrollbarYRail = $("<div class='ps-scrollbar-y-rail'>").appendTo($this);
      var $scrollbarY = $("<div class='ps-scrollbar-y'>").appendTo($scrollbarYRail);
      var scrollbarYActive;
      var scrollbarYHeight;
      var scrollbarYTop;
-      var scrollbarYRight = int($scrollbarYRail.css('right'));
+      var scrollbarYRight = getInt($scrollbarYRail.css('right'));
      var isScrollbarYUsingRight = scrollbarYRight === scrollbarYRight; // !isNaN
-      var scrollbarYLeft = isScrollbarYUsingRight ? null : int($scrollbarYRail.css('left'));
-      var railBorderYWidth = int($scrollbarYRail.css('borderTopWidth')) + int($scrollbarYRail.css('borderBottomWidth'));
+      var scrollbarYLeft = isScrollbarYUsingRight ? null : getInt($scrollbarYRail.css('left'));
+      var railBorderYWidth = getInt($scrollbarYRail.css('borderTopWidth')) + getInt($scrollbarYRail.css('borderBottomWidth'));
+      var railYMarginHeight = getInt($scrollbarYRail.css('marginTop')) + getInt($scrollbarYRail.css('marginBottom'));
+      var railYHeight;

      function updateScrollTop(currentTop, deltaY) {
        var newTop = currentTop + deltaY;
@@ -131,7 +139,7 @@
          scrollbarYTop = newTop;
        }

-        var scrollTop = int(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight));
+        var scrollTop = getInt(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight));
        $this.scrollTop(scrollTop);
      }

@@ -147,7 +155,7 @@
          scrollbarXLeft = newLeft;
        }

-        var scrollLeft = int(scrollbarXLeft * (contentWidth - containerWidth) / (containerWidth - scrollbarXWidth));
+        var scrollLeft = getInt(scrollbarXLeft * (contentWidth - containerWidth) / (containerWidth - scrollbarXWidth));
        $this.scrollLeft(scrollLeft);
      }

@@ -162,7 +170,7 @@
      }

      function updateCss() {
-        var xRailOffset = {width: containerWidth, display: scrollbarXActive ? "inherit" : "none"};
+        var xRailOffset = {width: railXWidth};
        if (isRtl) {
          xRailOffset.left = $this.scrollLeft() + containerWidth - contentWidth;
        } else {
@@ -175,7 +183,7 @@
        }
        $scrollbarXRail.css(xRailOffset);

-        var railYOffset = {top: $this.scrollTop(), height: containerHeight, display: scrollbarYActive ? "inherit" : "none"};
+        var railYOffset = {top: $this.scrollTop(), height: railYHeight};

        if (isScrollbarYUsingRight) {
          if (isRtl) {
@@ -208,8 +216,9 @@

        if (!settings.suppressScrollX && containerWidth + settings.scrollXMarginOffset < contentWidth) {
          scrollbarXActive = true;
-          scrollbarXWidth = getThumbSize(int(containerWidth * containerWidth / contentWidth));
-          scrollbarXLeft = int($this.scrollLeft() * (containerWidth - scrollbarXWidth) / (contentWidth - containerWidth));
+          railXWidth = containerWidth - railXMarginWidth;
+          scrollbarXWidth = getThumbSize(getInt(railXWidth * containerWidth / contentWidth));
+          scrollbarXLeft = getInt($this.scrollLeft() * (railXWidth - scrollbarXWidth) / (contentWidth - containerWidth));
        } else {
          scrollbarXActive = false;
          scrollbarXWidth = 0;
@@ -219,8 +228,9 @@

        if (!settings.suppressScrollY && containerHeight + settings.scrollYMarginOffset < contentHeight) {
          scrollbarYActive = true;
-          scrollbarYHeight = getThumbSize(int(containerHeight * containerHeight / contentHeight));
-          scrollbarYTop = int($this.scrollTop() * (containerHeight - scrollbarYHeight) / (contentHeight - containerHeight));
+          railYHeight = containerHeight - railYMarginHeight;
+          scrollbarYHeight = getThumbSize(getInt(railYHeight * containerHeight / contentHeight));
+          scrollbarYTop = getInt($this.scrollTop() * (railYHeight - scrollbarYHeight) / (contentHeight - containerHeight));
        } else {
          scrollbarYActive = false;
          scrollbarYHeight = 0;
@@ -228,11 +238,11 @@
          $this.scrollTop(0);
        }

-        if (scrollbarXLeft >= containerWidth - scrollbarXWidth) {
-          scrollbarXLeft = containerWidth - scrollbarXWidth;
+        if (scrollbarXLeft >= railXWidth - scrollbarXWidth) {
+          scrollbarXLeft = railXWidth - scrollbarXWidth;
        }
-        if (scrollbarYTop >= containerHeight - scrollbarYHeight) {
-          scrollbarYTop = containerHeight - scrollbarYHeight;
+        if (scrollbarYTop >= railYHeight - scrollbarYHeight) {
+          scrollbarYTop = railYHeight - scrollbarYHeight;
        }

        updateCss();
@@ -249,32 +259,30 @@
        var currentLeft;
        var currentPageX;

-        var inScrolling = false;
+        var mouseMoveHandler = function (e) {
+          updateScrollLeft(currentLeft, e.pageX - currentPageX);
+          updateGeometry();
+          e.stopPropagation();
+          e.preventDefault();
+        };
+
+        var mouseUpHandler = function (e) {
+          $scrollbarXRail.removeClass('in-scrolling');
+          $(ownerDocument).unbind(eventClass('mousemove'), mouseMoveHandler);
+        };
+
        $scrollbarX.bind(eventClass('mousedown'), function (e) {
          currentPageX = e.pageX;
          currentLeft = $scrollbarX.position().left;
          $scrollbarXRail.addClass('in-scrolling');
-          inScrolling = true;
+
+          $(ownerDocument).bind(eventClass('mousemove'), mouseMoveHandler);
+          $(ownerDocument).one(eventClass('mouseup'), mouseUpHandler);
+
          e.stopPropagation();
          e.preventDefault();
        });

-        $(ownerDocument).bind(eventClass('mousemove'), function (e) {
-          if (inScrolling) {
-            updateScrollLeft(currentLeft, e.pageX - currentPageX);
-            updateGeometry();
-            e.stopPropagation();
-            e.preventDefault();
-          }
-        });
-
-        $(ownerDocument).bind(eventClass('mouseup'), function (e) {
-          if (inScrolling) {
-            inScrolling = false;
-            $scrollbarXRail.removeClass('in-scrolling');
-          }
-        });
-
        currentLeft =
        currentPageX = null;
      }
@@ -283,38 +291,35 @@
        var currentTop;
        var currentPageY;

-        var inScrolling = false;
+        var mouseMoveHandler = function (e) {
+          updateScrollTop(currentTop, e.pageY - currentPageY);
+          updateGeometry();
+          e.stopPropagation();
+          e.preventDefault();
+        };
+
+        var mouseUpHandler = function (e) {
+          $scrollbarYRail.removeClass('in-scrolling');
+          $(ownerDocument).unbind(eventClass('mousemove'), mouseMoveHandler);
+        };
+
        $scrollbarY.bind(eventClass('mousedown'), function (e) {
          currentPageY = e.pageY;
          currentTop = $scrollbarY.position().top;
-          inScrolling = true;
          $scrollbarYRail.addClass('in-scrolling');
+
+          $(ownerDocument).bind(eventClass('mousemove'), mouseMoveHandler);
+          $(ownerDocument).one(eventClass('mouseup'), mouseUpHandler);
+
          e.stopPropagation();
          e.preventDefault();
        });

-        $(ownerDocument).bind(eventClass('mousemove'), function (e) {
-          if (inScrolling) {
-            updateScrollTop(currentTop, e.pageY - currentPageY);
-            updateGeometry();
-            e.stopPropagation();
-            e.preventDefault();
-          }
-        });
-
-        $(ownerDocument).bind(eventClass('mouseup'), function (e) {
-          if (inScrolling) {
-            inScrolling = false;
-            $scrollbarYRail.removeClass('in-scrolling');
-          }
-        });
-
        currentTop =
        currentPageY = null;
      }

-      // check if the default scrolling should be prevented.
-      function shouldPreventDefault(deltaX, deltaY) {
+      function shouldPreventWheel(deltaX, deltaY) {
        var scrollTop = $this.scrollTop();
        if (deltaX === 0) {
          if (!scrollbarYActive) {
@@ -337,6 +342,31 @@
        return true;
      }

+      function shouldPreventSwipe(deltaX, deltaY) {
+        var scrollTop = $this.scrollTop();
+        var scrollLeft = $this.scrollLeft();
+        var magnitudeX = Math.abs(deltaX);
+        var magnitudeY = Math.abs(deltaY);
+
+        if (magnitudeY > magnitudeX) {
+          // user is perhaps trying to swipe up/down the page
+
+          if (((deltaY < 0) && (scrollTop === contentHeight - containerHeight)) ||
+              ((deltaY > 0) && (scrollTop === 0))) {
+            return !settings.swipePropagation;
+          }
+        } else if (magnitudeX > magnitudeY) {
+          // user is perhaps trying to swipe left/right across the page
+
+          if (((deltaX < 0) && (scrollLeft === contentWidth - containerWidth)) ||
+              ((deltaX > 0) && (scrollLeft === 0))) {
+            return !settings.swipePropagation;
+          }
+        }
+
+        return true;
+      }
+
      function bindMouseWheelHandler() {
        var shouldPrevent = false;

@@ -366,6 +396,13 @@
        }

        function mousewheelHandler(e) {
+          // FIXME: this is a quick fix for the select problem in FF and IE.
+          // If there comes an effective way to deal with the problem,
+          // this lines should be removed.
+          if (!isWebkit && $this.find('select:focus').length > 0) {
+            return;
+          }
+
          var delta = getDeltaFromEvent(e);

          var deltaX = delta[0];
@@ -399,7 +436,7 @@

          updateGeometry();

-          shouldPrevent = (shouldPrevent || shouldPreventDefault(deltaX, deltaY));
+          shouldPrevent = (shouldPrevent || shouldPreventWheel(deltaX, deltaY));
          if (shouldPrevent) {
            e.stopPropagation();
            e.preventDefault();
@@ -485,7 +522,7 @@
          $this.scrollTop($this.scrollTop() - deltaY);
          $this.scrollLeft($this.scrollLeft() + deltaX);

-          shouldPrevent = shouldPreventDefault(deltaX, deltaY);
+          shouldPrevent = shouldPreventWheel(deltaX, deltaY);
          if (shouldPrevent) {
            e.preventDefault();
          }
@@ -497,7 +534,7 @@

        $scrollbarY.bind(eventClass('click'), stopPropagation);
        $scrollbarYRail.bind(eventClass('click'), function (e) {
-          var halfOfScrollbarLength = int(scrollbarYHeight / 2);
+          var halfOfScrollbarLength = getInt(scrollbarYHeight / 2);
          var positionTop = e.pageY - $scrollbarYRail.offset().top - halfOfScrollbarLength;
          var maxPositionTop = containerHeight - scrollbarYHeight;
          var positionRatio = positionTop / maxPositionTop;
@@ -513,7 +550,7 @@

        $scrollbarX.bind(eventClass('click'), stopPropagation);
        $scrollbarXRail.bind(eventClass('click'), function (e) {
-          var halfOfScrollbarLength = int(scrollbarXWidth / 2);
+          var halfOfScrollbarLength = getInt(scrollbarXWidth / 2);
          var positionLeft = e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength;
          var maxPositionLeft = containerWidth - scrollbarXWidth;
          var positionRatio = positionLeft / maxPositionLeft;
@@ -544,6 +581,11 @@
        function startScrolling() {
          if (!scrollingLoop) {
            scrollingLoop = setInterval(function () {
+              if (!isPluginAlive()) {
+                clearInterval(scrollingLoop);
+                return;
+              }
+
              $this.scrollTop($this.scrollTop() + scrollDiff.top);
              $this.scrollLeft($this.scrollLeft() + scrollDiff.left);
              updateGeometry();
@@ -634,7 +676,7 @@
        var startOffset = {};
        var startTime = 0;
        var speed = {};
-        var breakingProcess = null;
+        var easingLoop = null;
        var inGlobalTouch = false;
        var inLocalTouch = false;

@@ -658,7 +700,7 @@
          if (event.targetTouches && event.targetTouches.length === 1) {
            return true;
          }
-          if (event.pointerType && event.pointerType !== 'mouse') {
+          if (event.pointerType && event.pointerType !== 'mouse' && event.pointerType !== event.MSPOINTER_TYPE_MOUSE) {
            return true;
          }
          return false;
@@ -674,8 +716,8 @@

            startTime = (new Date()).getTime();

-            if (breakingProcess !== null) {
-              clearInterval(breakingProcess);
+            if (easingLoop !== null) {
+              clearInterval(easingLoop);
            }

            e.stopPropagation();
@@ -702,18 +744,25 @@
              startTime = currentTime;
            }

-            e.stopPropagation();
-            e.preventDefault();
+            if (shouldPreventSwipe(differenceX, differenceY)) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
          }
        }
        function touchEnd(e) {
          if (!inGlobalTouch && inLocalTouch) {
            inLocalTouch = false;

-            clearInterval(breakingProcess);
-            breakingProcess = setInterval(function () {
+            clearInterval(easingLoop);
+            easingLoop = setInterval(function () {
+              if (!isPluginAlive()) {
+                clearInterval(easingLoop);
+                return;
+              }
+
              if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
-                clearInterval(breakingProcess);
+                clearInterval(easingLoop);
                return;
              }

@@ -769,6 +818,7 @@
        $scrollbarYRail.remove();

        // clean all variables
+        $this =
        $scrollbarXRail =
        $scrollbarYRail =
        $scrollbarX =
--- a/src/perfect-scrollbar.scss
+++ b/src/perfect-scrollbar.scss
@@ -0,0 +1,111 @@
+// Helper mixins
+@mixin opacity($o) {
+  $IEValue: $o * 100;
+  opacity: $o;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
+      filter: alpha(opacity=$IEValue);
+}
+
+@mixin border-radius($r) {
+  -webkit-border-radius: $r;
+     -moz-border-radius: $r;
+      -ms-border-radius: $r;
+          border-radius: $r;
+}
+
+@mixin transition($t...) {
+  -webkit-transition: $t;
+     -moz-transition: $t;
+       -o-transition: $t;
+          transition: $t;
+}
+
+// Scrollbar mixins
+@mixin scrollbar-rail-default {
+  display: none;
+  position: absolute; /* please don't change 'position' */
+  @include border-radius(4px);
+  @include opacity(0);
+  @include transition(background-color .2s linear, opacity .2s linear);
+}
+
+@mixin scrollbar-rail-hover {
+  background-color: #eee;
+  @include opacity(0.9);
+}
+
+@mixin scrollbar-default {
+  position: absolute; /* please don't change 'position' */
+  background-color: #aaa;
+  @include border-radius(4px);
+  @include transition(background-color .2s linear);
+}
+
+@mixin scrollbar-hover {
+  background-color: #999;
+}
+
+@mixin in-scrolling {
+  &.in-scrolling {
+    @include scrollbar-rail-hover;
+  }
+}
+
+.ps-container {
+  &.ps-active-x > .ps-scrollbar-x-rail,
+  &.ps-active-y > .ps-scrollbar-y-rail {
+    display: block;
+  }
+
+  >.ps-scrollbar-x-rail {
+    @include scrollbar-rail-default;
+    bottom: 3px; /* there must be 'bottom' for ps-scrollbar-x-rail */
+    height: 8px;
+
+    >.ps-scrollbar-x {
+      @include scrollbar-default;
+      bottom: 0; /* there must be 'bottom' for ps-scrollbar-x */
+      height: 8px;
+    }
+
+    @include in-scrolling;
+  }
+
+  >.ps-scrollbar-y-rail {
+    @include scrollbar-rail-default;
+    right: 3px; /* there must be 'right' for ps-scrollbar-y-rail */
+    width: 8px;
+
+    >.ps-scrollbar-y {
+      @include scrollbar-default;
+      right: 0; /* there must be 'right' for ps-scrollbar-y */
+      width: 8px;
+    }
+
+    @include in-scrolling;
+  }
+
+  &:hover {
+    >.ps-scrollbar-x-rail,
+    >.ps-scrollbar-y-rail {
+      @include opacity(0.6);
+      @include in-scrolling;
+    }
+
+    >.ps-scrollbar-x-rail:hover {
+      @include scrollbar-rail-hover;
+
+      >.ps-scrollbar-x {
+        @include scrollbar-hover;
+      }
+    }
+
+    >.ps-scrollbar-y-rail:hover {
+      @include scrollbar-rail-hover;
+
+      >.ps-scrollbar-y {
+        @include scrollbar-hover;
+      }
+    }
+  }
+}
Author	SHA1	Message	Date
Hyunje Alex Jun	dcdefebded	Release 0.5.8 1. Improve mouse handler logic. 2. Add rail margin detection. 3. Add swipePropagation option. 4. Bug fixes.	2014-12-02 11:40:46 +00:00
Hyunje Alex Jun	fae5c001d4	Update README.md Add `swipePropagation`.	2014-12-02 11:38:54 +00:00
Hyunje Alex Jun	febcaa3603	Add an example for scrollbar margin.	2014-12-02 11:34:45 +00:00
Hyunje Alex Jun	20576ac717	Merge pull request #252 from tkhyn/master Detects margins around the rails	2014-12-02 11:34:07 +00:00
Hyunje Alex Jun	7ce708216d	Small style fixes for preventDefault functions.	2014-12-02 11:24:36 +00:00
DI-john	931be25635	propagate mobile swipe gestures to page where appropriate	2014-12-02 11:00:37 +00:00
Thomas Khyn	74d0fcb1de	Detects margins around the rails	2014-11-17 14:18:37 +13:00
Hyunje Alex Jun	9b3301fd0c	Merge pull request #251 from tatarinov/master Renamed 'int' helper in 'getInt' #250	2014-11-14 12:27:05 +00:00
tatarinov	a94df46fe3	Removed unnecessary semicolon	2014-11-14 10:25:19 +04:00
tatarinov	20053e9cf1	Renamed 'int' helper in 'getInt' #250	2014-11-14 10:04:07 +04:00
Hyunje Alex Jun	aaab294dc4	Add an example for always-visible scrollbars.	2014-11-11 14:40:03 +00:00
Hyunje Alex Jun	e9fcc0f02a	Temporary fix for mousewheel problem of select in FF and IE. Resolve #247.	2014-11-11 13:29:09 +00:00
Alexandr Subbotin	05b20f45ef	decrease mouse handlers count and every-time class checking during mousemove	2014-11-11 13:28:58 +00:00
Hyunje Alex Jun	3821413589	Release 0.5.7. 1. IE mouse pointer event bug fix. 2. Use scss for stylesheet. 3. Clear intervals when destroyed. 4. Bug fixes.	2014-11-05 19:02:45 +00:00
Hyunje Alex Jun	08a387d9c1	Add removable-list-element example.	2014-11-05 19:02:00 +00:00
Hyunje Alex Jun	1849e64122	Remove remaining inline display style. It caused regression bugs.	2014-11-05 18:51:52 +00:00
Hyunje Alex Jun	f9c3dc0b20	Change name of variable `breakingProcess`. It's too ambiguous to understand the purpose of the variable.	2014-10-31 19:25:43 +00:00
Hyunje Alex Jun	aa92487ed3	Clear intervals if the plugin is destroyed.	2014-10-31 19:25:13 +00:00
Hyunje Alex Jun	a3bf38ada2	Update README.md Add FAQ.	2014-10-31 19:16:36 +00:00
Hyunje Alex Jun	d24f9bd41b	Use scss for stylesheet. We can build the scss source to .css and .min.css files with the `grunt build` command.	2014-10-31 02:20:22 +00:00
Hyunje Alex Jun	5be50316ca	Merge pull request #239 from darthmaim/bugfix_ie10_pointertype Don't handle mouse pointer events as touch in IE10.	2014-10-30 18:21:43 +00:00
Konrad Liebig	94be67d998	Don't handle mouse pointer events as touch in IE10	2014-10-30 17:04:20 +01:00