Release 0.5.6.

1. Add scrolling with selection. 2. Bug fixes.
Change how scrollbar rails are being hidden.
2014-10-28 18:02:22 +00:00 · 2014-10-28 18:01:23 +00:00 · 2014-10-28 17:49:16 +00:00 · 2014-10-28 16:41:36 +00:00 · 2014-10-28 14:33:07 +00:00 · 2014-10-24 12:06:04 +01:00
8 changed files with 266 additions and 122 deletions
--- a/README.md
+++ b/README.md
@@ -44,14 +44,20 @@ You can download the latest stable version with download links in [Github Page](
 If you want to use the development version of the plugin, use the source files which are not minified. They're in the `src` directory. The development version may be unstable, but some known bugs can be fixed.

 ```
-git clone https://github.com/noraesae/perfect-scrollbar.git
-cd perfect-scrollbar/src
+$ git clone https://github.com/noraesae/perfect-scrollbar.git
+$ cd perfect-scrollbar/src
 ```

 You can use [Bower](http://bower.io/) to install the plugin. The plugin is registered as `perfect-scrollbar`.

 ```
-bower install perfect-scrollbar
+$ bower install perfect-scrollbar
+```
+
+It's registered on [npm](https://www.npmjs.org/package/perfect-scrollbar) as `perfect-scrollbar`.
+
+```
+$ npm install perfect-scrollbar
 ```

 You can also load it from [cdnjs](http://cdnjs.com/). It is registered as [`jquery.perfect-scrollbar`](http://www.cdnjs.com/libraries/jquery.perfect-scrollbar).
@@ -186,11 +192,9 @@ For IE problems, please refer to [IE Support](https://github.com/noraesae/perfec
 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).
+The plugin would work in IEs >= IE9(not well, though).

-**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.
+**The patches to fix problems in IE<=8 won't be accepted.**

 When old IEs should be supported, please fork the project and make patches personally.

--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
  "name": "perfect-scrollbar",
-  "version": "0.5.3",
+  "version": "0.5.6",
  "homepage": "http://noraesae.github.io/perfect-scrollbar/",
  "authors": [
    "Hyunje Alex Jun <me@noraesae.net>"
--- a/min/perfect-scrollbar.min.css
+++ b/min/perfect-scrollbar.min.css
@@ -1,5 +1,5 @@
-/*! perfect-scrollbar - v0.5.3
+/*! perfect-scrollbar - v0.5.6
 * http://noraesae.github.com/perfect-scrollbar/
 * Copyright (c) 2014 Hyunje Alex Jun; Licensed MIT */

-.ps-container .ps-scrollbar-x-rail{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:hover .ps-scrollbar-x-rail,.ps-container.hover .ps-scrollbar-x-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-x-rail:hover,.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{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:hover .ps-scrollbar-y-rail,.ps-container.hover .ps-scrollbar-y-rail{opacity:.6;filter:alpha(opacity=60)}.ps-container .ps-scrollbar-y-rail:hover,.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{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,.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x{background-color:#999}.ps-container .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,.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y{background-color:#999}
+.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}
--- a/min/perfect-scrollbar.min.js
+++ b/min/perfect-scrollbar.min.js
--- a/package.json
+++ b/package.json
@@ -1,7 +1,25 @@
 {
  "name": "perfect-scrollbar",
-  "version": "0.5.3",
+  "version": "0.5.6",
+  "description": "Tiny but perfect jquery scrollbar plugin.",
+  "author": "Hyunje Alex Jun <me@noraesae.net>",
+  "contributors": [{
+    "name": "Hyunje Alex Jun",
+    "email": "me@noraesae.net"
+  }],
  "main": "src/perfect-scrollbar.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/noraesae/perfect-scrollbar"
+  },
+  "bugs": {
+    "url": "https://github.com/noraesae/perfect-scrollbar/issues"
+  },
+  "keywords": [
+    "jquery-plugin",
+    "scroll",
+    "scrollbar"
+  ],
  "engines": {
    "node": ">= 0.8.0"
  },
@@ -16,5 +34,6 @@
  },
  "scripts": {
    "test": "grunt travis --verbose"
-  }
+  },
+  "license": "MIT"
 }
--- 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.3",
+  "version": "0.5.6",
  "author": {
    "name": "Hyunje Alex Jun",
    "email": "me@noraesae.net",
--- a/src/perfect-scrollbar.css
+++ b/src/perfect-scrollbar.css
@@ -1,4 +1,5 @@
-.ps-container .ps-scrollbar-x-rail {
+.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;
@@ -13,26 +14,29 @@
    transition: background-color .2s linear, opacity .2s linear;
 }

-.ps-container:hover .ps-scrollbar-x-rail,
-.ps-container.hover .ps-scrollbar-x-rail {
+.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,
-.ps-container .ps-scrollbar-x-rail.hover {
+.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 {
+.ps-container>.ps-scrollbar-x-rail.in-scrolling {
    background-color: #eee;
    opacity: 0.9;
    filter: alpha(opacity=90);
 }

-.ps-container .ps-scrollbar-y-rail {
+.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;
@@ -47,26 +51,28 @@
    transition: background-color .2s linear, opacity .2s linear;
 }

-.ps-container:hover .ps-scrollbar-y-rail,
-.ps-container.hover .ps-scrollbar-y-rail {
+.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,
-.ps-container .ps-scrollbar-y-rail.hover {
+.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 {
+.ps-container>.ps-scrollbar-y-rail.in-scrolling {
    background-color: #eee;
    opacity: 0.9;
    filter: alpha(opacity=90);
 }

-.ps-container .ps-scrollbar-x {
+.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;
@@ -80,12 +86,11 @@
    transition: background-color .2s linear;
 }

-.ps-container .ps-scrollbar-x-rail:hover .ps-scrollbar-x,
-.ps-container .ps-scrollbar-x-rail.hover .ps-scrollbar-x {
+.ps-container>.ps-scrollbar-x-rail:hover>.ps-scrollbar-x {
    background-color: #999;
 }

-.ps-container .ps-scrollbar-y {
+.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;
@@ -99,7 +104,6 @@
    transition: background-color .2s linear;
 }

-.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,
-.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y {
+.ps-container>.ps-scrollbar-y-rail:hover>.ps-scrollbar-y {
    background-color: #999;
 }
--- a/src/perfect-scrollbar.js
+++ b/src/perfect-scrollbar.js
@@ -39,14 +39,18 @@
    includePadding: false
  };

-  var getEventClassName = (function () {
-    var incrementingId = 0;
-    return function () {
-      var id = incrementingId;
-      incrementingId += 1;
-      return '.perfect-scrollbar-' + id;
+  var incrementingId = 0;
+  var eventClassFactory = function () {
+    var id = incrementingId++;
+    return function (eventName) {
+      var className = '.perfect-scrollbar-' + id;
+      if (typeof eventName === 'undefined') {
+        return className;
+      } else {
+        return eventName + className;
+      }
    };
-  })();
+  };

  $.fn.perfectScrollbar = function (suppliedSettings, option) {

@@ -92,7 +96,7 @@
      var contentHeight;

      var isRtl = $this.css('direction') === "rtl";
-      var eventClassName = getEventClassName();
+      var eventClass = eventClassFactory();
      var ownerDocument = this.ownerDocument || document;

      var $scrollbarXRail = $("<div class='ps-scrollbar-x-rail'>").appendTo($this);
@@ -113,7 +117,7 @@
      var scrollbarYRight = int($scrollbarYRail.css('right'));
      var isScrollbarYUsingRight = scrollbarYRight === scrollbarYRight; // !isNaN
      var scrollbarYLeft = isScrollbarYUsingRight ? null : int($scrollbarYRail.css('left'));
-      var railBorderYWidth = int($scrollbarXRail.css('borderTopWidth')) + int($scrollbarXRail.css('borderBottomWidth'));
+      var railBorderYWidth = int($scrollbarYRail.css('borderTopWidth')) + int($scrollbarYRail.css('borderBottomWidth'));

      function updateScrollTop(currentTop, deltaY) {
        var newTop = currentTop + deltaY;
@@ -194,8 +198,8 @@

      function updateGeometry() {
        // Hide scrollbars not to affect scrollWidth and scrollHeight
-        $scrollbarXRail.hide();
-        $scrollbarYRail.hide();
+        $this.removeClass('ps-active-x');
+        $this.removeClass('ps-active-y');

        containerWidth = settings.includePadding ? $this.innerWidth() : $this.width();
        containerHeight = settings.includePadding ? $this.innerHeight() : $this.height();
@@ -235,22 +239,9 @@

        if (scrollbarXActive) {
          $this.addClass('ps-active-x');
-        } else {
-          $this.removeClass('ps-active-x');
        }
-
        if (scrollbarYActive) {
          $this.addClass('ps-active-y');
-        } else {
-          $this.removeClass('ps-active-y');
-        }
-
-        // Show scrollbars if needed after updated
-        if (!settings.suppressScrollX) {
-          $scrollbarXRail.show();
-        }
-        if (!settings.suppressScrollY) {
-          $scrollbarYRail.show();
        }
      }

@@ -258,16 +249,18 @@
        var currentLeft;
        var currentPageX;

-        $scrollbarX.bind('mousedown' + eventClassName, function (e) {
+        var inScrolling = false;
+        $scrollbarX.bind(eventClass('mousedown'), function (e) {
          currentPageX = e.pageX;
          currentLeft = $scrollbarX.position().left;
          $scrollbarXRail.addClass('in-scrolling');
+          inScrolling = true;
          e.stopPropagation();
          e.preventDefault();
        });

-        $(ownerDocument).bind('mousemove' + eventClassName, function (e) {
-          if ($scrollbarXRail.hasClass('in-scrolling')) {
+        $(ownerDocument).bind(eventClass('mousemove'), function (e) {
+          if (inScrolling) {
            updateScrollLeft(currentLeft, e.pageX - currentPageX);
            updateGeometry();
            e.stopPropagation();
@@ -275,8 +268,9 @@
          }
        });

-        $(ownerDocument).bind('mouseup' + eventClassName, function (e) {
-          if ($scrollbarXRail.hasClass('in-scrolling')) {
+        $(ownerDocument).bind(eventClass('mouseup'), function (e) {
+          if (inScrolling) {
+            inScrolling = false;
            $scrollbarXRail.removeClass('in-scrolling');
          }
        });
@@ -289,16 +283,18 @@
        var currentTop;
        var currentPageY;

-        $scrollbarY.bind('mousedown' + eventClassName, function (e) {
+        var inScrolling = false;
+        $scrollbarY.bind(eventClass('mousedown'), function (e) {
          currentPageY = e.pageY;
          currentTop = $scrollbarY.position().top;
+          inScrolling = true;
          $scrollbarYRail.addClass('in-scrolling');
          e.stopPropagation();
          e.preventDefault();
        });

-        $(ownerDocument).bind('mousemove' + eventClassName, function (e) {
-          if ($scrollbarYRail.hasClass('in-scrolling')) {
+        $(ownerDocument).bind(eventClass('mousemove'), function (e) {
+          if (inScrolling) {
            updateScrollTop(currentTop, e.pageY - currentPageY);
            updateGeometry();
            e.stopPropagation();
@@ -306,8 +302,9 @@
          }
        });

-        $(ownerDocument).bind('mouseup' + eventClassName, function (e) {
-          if ($scrollbarYRail.hasClass('in-scrolling')) {
+        $(ownerDocument).bind(eventClass('mouseup'), function (e) {
+          if (inScrolling) {
+            inScrolling = false;
            $scrollbarYRail.removeClass('in-scrolling');
          }
        });
@@ -410,23 +407,23 @@
        }

        if (typeof window.onwheel !== "undefined") {
-          $this.bind('wheel' + eventClassName, mousewheelHandler);
+          $this.bind(eventClass('wheel'), mousewheelHandler);
        } else if (typeof window.onmousewheel !== "undefined") {
-          $this.bind('mousewheel' + eventClassName, mousewheelHandler);
+          $this.bind(eventClass('mousewheel'), mousewheelHandler);
        }
      }

      function bindKeyboardHandler() {
        var hovered = false;
-        $this.bind('mouseenter' + eventClassName, function (e) {
+        $this.bind(eventClass('mouseenter'), function (e) {
          hovered = true;
        });
-        $this.bind('mouseleave' + eventClassName, function (e) {
+        $this.bind(eventClass('mouseleave'), function (e) {
          hovered = false;
        });

        var shouldPrevent = false;
-        $(ownerDocument).bind('keydown' + eventClassName, function (e) {
+        $(ownerDocument).bind(eventClass('keydown'), function (e) {
          if (e.isDefaultPrevented && e.isDefaultPrevented()) {
            return;
          }
@@ -498,8 +495,8 @@
      function bindRailClickHandler() {
        function stopPropagation(e) { e.stopPropagation(); }

-        $scrollbarY.bind('click' + eventClassName, stopPropagation);
-        $scrollbarYRail.bind('click' + eventClassName, function (e) {
+        $scrollbarY.bind(eventClass('click'), stopPropagation);
+        $scrollbarYRail.bind(eventClass('click'), function (e) {
          var halfOfScrollbarLength = int(scrollbarYHeight / 2);
          var positionTop = e.pageY - $scrollbarYRail.offset().top - halfOfScrollbarLength;
          var maxPositionTop = containerHeight - scrollbarYHeight;
@@ -514,8 +511,8 @@
          $this.scrollTop((contentHeight - containerHeight) * positionRatio);
        });

-        $scrollbarX.bind('click' + eventClassName, stopPropagation);
-        $scrollbarXRail.bind('click' + eventClassName, function (e) {
+        $scrollbarX.bind(eventClass('click'), stopPropagation);
+        $scrollbarXRail.bind(eventClass('click'), function (e) {
          var halfOfScrollbarLength = int(scrollbarXWidth / 2);
          var positionLeft = e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength;
          var maxPositionLeft = containerWidth - scrollbarXWidth;
@@ -531,7 +528,102 @@
        });
      }

-      function bindTouchHandler() {
+      function bindSelectionHandler() {
+        function getRangeNode() {
+          var selection = window.getSelection ? window.getSelection() :
+                          document.getSlection ? document.getSlection() : {rangeCount: 0};
+          if (selection.rangeCount === 0) {
+            return null;
+          } else {
+            return selection.getRangeAt(0).commonAncestorContainer;
+          }
+        }
+
+        var scrollingLoop = null;
+        var scrollDiff = {top: 0, left: 0};
+        function startScrolling() {
+          if (!scrollingLoop) {
+            scrollingLoop = setInterval(function () {
+              $this.scrollTop($this.scrollTop() + scrollDiff.top);
+              $this.scrollLeft($this.scrollLeft() + scrollDiff.left);
+              updateGeometry();
+            }, 50); // every .1 sec
+          }
+        }
+        function stopScrolling() {
+          if (scrollingLoop) {
+            clearInterval(scrollingLoop);
+            scrollingLoop = null;
+          }
+          $scrollbarXRail.removeClass('in-scrolling');
+          $scrollbarYRail.removeClass('in-scrolling');
+        }
+
+        var isSelected = false;
+        $(ownerDocument).bind(eventClass('selectionchange'), function (e) {
+          if ($.contains($this[0], getRangeNode())) {
+            isSelected = true;
+          } else {
+            isSelected = false;
+            stopScrolling();
+          }
+        });
+        $(window).bind(eventClass('mouseup'), function (e) {
+          if (isSelected) {
+            isSelected = false;
+            stopScrolling();
+          }
+        });
+
+        $(window).bind(eventClass('mousemove'), function (e) {
+          if (isSelected) {
+            var mousePosition = {x: e.pageX, y: e.pageY};
+            var containerOffset = $this.offset();
+            var containerGeometry = {
+              left: containerOffset.left,
+              right: containerOffset.left + $this.outerWidth(),
+              top: containerOffset.top,
+              bottom: containerOffset.top + $this.outerHeight()
+            };
+
+            if (mousePosition.x < containerGeometry.left + 3) {
+              scrollDiff.left = -5;
+              $scrollbarXRail.addClass('in-scrolling');
+            } else if (mousePosition.x > containerGeometry.right - 3) {
+              scrollDiff.left = 5;
+              $scrollbarXRail.addClass('in-scrolling');
+            } else {
+              scrollDiff.left = 0;
+            }
+
+            if (mousePosition.y < containerGeometry.top + 3) {
+              if (containerGeometry.top + 3 - mousePosition.y < 5) {
+                scrollDiff.top = -5;
+              } else {
+                scrollDiff.top = -20;
+              }
+              $scrollbarYRail.addClass('in-scrolling');
+            } else if (mousePosition.y > containerGeometry.bottom - 3) {
+              if (mousePosition.y - containerGeometry.bottom + 3 < 5) {
+                scrollDiff.top = 5;
+              } else {
+                scrollDiff.top = 20;
+              }
+              $scrollbarYRail.addClass('in-scrolling');
+            } else {
+              scrollDiff.top = 0;
+            }
+
+            if (scrollDiff.top === 0 && scrollDiff.left === 0) {
+              stopScrolling();
+            } else {
+              startScrolling();
+            }
+          }
+        });
+      }
+
+      function bindTouchHandler(supportsTouch, supportsIePointer) {
        function applyTouchMove(differenceX, differenceY) {
          $this.scrollTop($this.scrollTop() - differenceY);
          $this.scrollLeft($this.scrollLeft() - differenceX);
@@ -544,6 +636,7 @@
        var speed = {};
        var breakingProcess = null;
        var inGlobalTouch = false;
+        var inLocalTouch = false;

        function globalTouchStart(e) {
          inGlobalTouch = true;
@@ -560,22 +653,36 @@
            return e.originalEvent;
          }
        }
-        function touchStart(e) {
-          var touch = getTouch(e);
-
-          startOffset.pageX = touch.pageX;
-          startOffset.pageY = touch.pageY;
-
-          startTime = (new Date()).getTime();
-
-          if (breakingProcess !== null) {
-            clearInterval(breakingProcess);
+        function shouldHandle(e) {
+          var event = e.originalEvent;
+          if (event.targetTouches && event.targetTouches.length === 1) {
+            return true;
          }
+          if (event.pointerType && event.pointerType !== 'mouse') {
+            return true;
+          }
+          return false;
+        }
+        function touchStart(e) {
+          if (shouldHandle(e)) {
+            inLocalTouch = true;

-          e.stopPropagation();
+            var touch = getTouch(e);
+
+            startOffset.pageX = touch.pageX;
+            startOffset.pageY = touch.pageY;
+
+            startTime = (new Date()).getTime();
+
+            if (breakingProcess !== null) {
+              clearInterval(breakingProcess);
+            }
+
+            e.stopPropagation();
+          }
        }
        function touchMove(e) {
-          if (!inGlobalTouch && e.originalEvent.targetTouches.length === 1) {
+          if (!inGlobalTouch && inLocalTouch && shouldHandle(e)) {
            var touch = getTouch(e);

            var currentOffset = {pageX: touch.pageX, pageY: touch.pageY};
@@ -595,55 +702,64 @@
              startTime = currentTime;
            }

+            e.stopPropagation();
            e.preventDefault();
          }
        }
        function touchEnd(e) {
-          clearInterval(breakingProcess);
-          breakingProcess = setInterval(function () {
-            if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
-              clearInterval(breakingProcess);
-              return;
-            }
+          if (!inGlobalTouch && inLocalTouch) {
+            inLocalTouch = false;

-            applyTouchMove(speed.x * 30, speed.y * 30);
+            clearInterval(breakingProcess);
+            breakingProcess = setInterval(function () {
+              if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
+                clearInterval(breakingProcess);
+                return;
+              }

-            speed.x *= 0.8;
-            speed.y *= 0.8;
-          }, 10);
+              applyTouchMove(speed.x * 30, speed.y * 30);
+
+              speed.x *= 0.8;
+              speed.y *= 0.8;
+            }, 10);
+          }
        }

-        $(window).bind("touchstart" + eventClassName, globalTouchStart);
-        $(window).bind("touchend" + eventClassName, globalTouchEnd);
-        $this.bind("touchstart" + eventClassName, touchStart);
-        $this.bind("touchmove" + eventClassName, touchMove);
-        $this.bind("touchend" + eventClassName, touchEnd);
+        if (supportsTouch) {
+          $(window).bind(eventClass("touchstart"), globalTouchStart);
+          $(window).bind(eventClass("touchend"), globalTouchEnd);
+          $this.bind(eventClass("touchstart"), touchStart);
+          $this.bind(eventClass("touchmove"), touchMove);
+          $this.bind(eventClass("touchend"), touchEnd);
+        }

-        if (window.PointerEvent) {
-          $(window).bind("pointerdown" + eventClassName, globalTouchStart);
-          $(window).bind("pointerup" + eventClassName, globalTouchEnd);
-          $this.bind("pointerdown" + eventClassName, touchStart);
-          $this.bind("pointermove" + eventClassName, touchMove);
-          $this.bind("pointerup" + eventClassName, touchEnd);
-        } else if (window.MSPointerEvent) {
-          $(window).bind("MSPointerDown" + eventClassName, globalTouchStart);
-          $(window).bind("MSPointerUp" + eventClassName, globalTouchEnd);
-          $this.bind("MSPointerDown" + eventClassName, touchStart);
-          $this.bind("MSPointerMove" + eventClassName, touchMove);
-          $this.bind("MSPointerUp" + eventClassName, touchEnd);
+        if (supportsIePointer) {
+          if (window.PointerEvent) {
+            $(window).bind(eventClass("pointerdown"), globalTouchStart);
+            $(window).bind(eventClass("pointerup"), globalTouchEnd);
+            $this.bind(eventClass("pointerdown"), touchStart);
+            $this.bind(eventClass("pointermove"), touchMove);
+            $this.bind(eventClass("pointerup"), touchEnd);
+          } else if (window.MSPointerEvent) {
+            $(window).bind(eventClass("MSPointerDown"), globalTouchStart);
+            $(window).bind(eventClass("MSPointerUp"), globalTouchEnd);
+            $this.bind(eventClass("MSPointerDown"), touchStart);
+            $this.bind(eventClass("MSPointerMove"), touchMove);
+            $this.bind(eventClass("MSPointerUp"), touchEnd);
+          }
        }
      }

      function bindScrollHandler() {
-        $this.bind('scroll' + eventClassName, function (e) {
+        $this.bind(eventClass('scroll'), function (e) {
          updateGeometry();
        });
      }

      function destroy() {
-        $this.unbind(eventClassName);
-        $(window).unbind(eventClassName);
-        $(ownerDocument).unbind(eventClassName);
+        $this.unbind(eventClass());
+        $(window).unbind(eventClass());
+        $(ownerDocument).unbind(eventClass());
        $this.data('perfect-scrollbar', null);
        $this.data('perfect-scrollbar-update', null);
        $this.data('perfect-scrollbar-destroy', null);
@@ -674,7 +790,7 @@
        isScrollbarYUsingRight =
        scrollbarYLeft =
        isRtl =
-        eventClassName = null;
+        eventClass = null;
      }

      var supportsTouch = (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch);
@@ -686,10 +802,11 @@
        bindMouseScrollXHandler();
        bindMouseScrollYHandler();
        bindRailClickHandler();
+        bindSelectionHandler();
        bindMouseWheelHandler();

        if (supportsTouch || supportsIePointer) {
-          bindTouchHandler();
+          bindTouchHandler(supportsTouch, supportsIePointer);
        }
        if (settings.useKeyboard) {
          bindKeyboardHandler();
Author	SHA1	Message	Date
Hyunje Alex Jun	17fd46a07d	Release 0.5.6. 1. Add scrolling with selection. 2. Bug fixes.	2014-10-28 18:02:22 +00:00
Hyunje Alex Jun	f099448e44	Change how scrollbar rails are being hidden. Inline CSS change is bad practice.	2014-10-28 18:01:23 +00:00
Hyunje Alex Jun	d0b97e4039	Add selection handler. Now perfect-scrollbar supports scrolling by selection.	2014-10-28 17:49:16 +00:00
Hyunje Alex Jun	f2342f2678	Change the way to handle event class name. Use factory pattern to handle it, instead of using + operator of string.	2014-10-28 16:41:36 +00:00
Hyunje Alex Jun	967c30a5e4	Shouldn't prevent default for touchStart. Default touch event shouldn't be prevented.	2014-10-28 14:33:07 +00:00
Hyunje Alex Jun	7cf8303b30	Release 0.5.5. 1. Bug fixes.	2014-10-24 12:06:04 +01:00
Hyunje Alex Jun	7dd6335965	Filter touch events not to be handled. In IE 10/11, MSPointer event is fired by mouse. It shouldn't be handled. Also, Exception has occurred with event.targetTouches, and this commit fixed it too.	2014-10-24 12:03:55 +01:00
Hyunje Alex Jun	494d68fe02	Merge pull request #231 from suxxes/patch-1 Correction for railBorderYWidth calculation	2014-10-22 16:10:07 +01:00
Fedor	3dde3ebb0c	Correction for railBorderYWidth calculation	2014-10-22 17:09:45 +04:00
Hyunje Alex Jun	12086573fc	Update README.md Add `npm` to install section.	2014-10-21 21:43:07 +01:00
Hyunje Alex Jun	a98c77d160	Release 0.5.4 1. Inner scrollbar problem fix. 2. Inner scrollbar touch event problem fix. 3. Bug fixes.	2014-10-21 21:31:02 +01:00
Hyunje Alex Jun	48e1c688b2	Add additional information to package.json	2014-10-21 21:29:34 +01:00
Hyunje Alex Jun	991e664b18	Stop propagation and prevent default for touch events. Fix #228.	2014-10-21 21:14:23 +01:00
Hyunje Alex Jun	ee4fc96b7a	Bind touch handlers only when it's supported. Fix #227.	2014-10-21 21:06:16 +01:00
Hyunje Alex Jun	664dec23d6	No longer support old IEs.	2014-10-21 20:58:43 +01:00
Hyunje Alex Jun	65869821c1	Use > CSS selector. This patch will resolve inner scrollbar problems.	2014-10-21 20:53:55 +01:00