Release 0.5.7.

1. IE mouse pointer event bug fix. 2. Use scss for stylesheet. 3. Clear intervals when destroyed. 4. Bug fixes.
Add removable-list-element example.
2014-11-05 19:02:45 +00:00 · 2014-11-05 19:02:00 +00:00 · 2014-11-05 18:51:52 +00:00 · 2014-10-31 19:25:43 +00:00 · 2014-10-31 19:25:13 +00:00 · 2014-10-31 19:16:36 +00:00
11 changed files with 305 additions and 142 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
@@ -203,6 +203,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.7",
  "homepage": "http://noraesae.github.io/perfect-scrollbar/",
  "authors": [
    "Hyunje Alex Jun <me@noraesae.net>"
--- 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/min/perfect-scrollbar.min.css
+++ b/min/perfect-scrollbar.min.css
@@ -1,5 +1,5 @@
-/*! perfect-scrollbar - v0.5.6
+/*! perfect-scrollbar - v0.5.7
 * 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.7",
  "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.7",
  "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
@@ -57,6 +57,7 @@
    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
@@ -162,7 +163,7 @@
      }

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

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

        if (isScrollbarYUsingRight) {
          if (isRtl) {
@@ -544,6 +545,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 +640,7 @@
        var startOffset = {};
        var startTime = 0;
        var speed = {};
-        var breakingProcess = null;
+        var easingLoop = null;
        var inGlobalTouch = false;
        var inLocalTouch = false;

@@ -658,7 +664,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 +680,8 @@

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

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

            e.stopPropagation();
@@ -710,10 +716,15 @@
          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 +780,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	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