Release 0.4.7.

1. Don't prevent the default scrolling for the inactive axis. 2. Enhance the scrolling logic. 3. Implement Home, End, Page Up, Page Down and Spacebar for the key scrolling. 4. Bug fixes.
Add a getEventClassName() function.
2014-01-21 12:30:13 +09:00 · 2014-01-21 12:22:04 +09:00 · 2014-01-21 11:57:30 +09:00 · 2014-01-20 18:55:54 -08:00 · 2014-01-20 20:14:26 -02:00 · 2014-01-15 00:23:21 +09:00
11 changed files with 252 additions and 146 deletions
--- a/README.md
+++ b/README.md
@@ -74,6 +74,22 @@ When set to true, and only one (vertical or horizontal) scrollbar is visible the
 When set to true, the scroll works with arrow keys on the keyboard. The element is scrolled only when the mouse cursor hovers the element.  
 **Default: true**

+### suppressScrollX
+When set to true, the scroll bar in X axis will not be available, regardless of the content width.  
+**Default: false**
+
+### suppressScrollY
+When set to true, the scroll bar in Y axis will not be available, regardless of the content height.  
+**Default: false**
+
+### scrollXMarginOffset
+The number of pixels the content width can surpass the container width without enabling the X axis scroll bar. Allows some "wiggle room" or "offset break", so that X axis scroll bar is not enabled just because of a few pixels.  
+**Default: 0**
+
+### scrollYMarginOffset
+The number of pixels the content height can surpass the container height without enabling the Y axis scroll bar. Allows some "wiggle room" or "offset break", so that Y axis scroll bar is not enabled just because of a few pixels.  
+**Default: 0**
+
 How to Use
 ----------

--- a/examples/options-suppressScrollAxis.html
+++ b/examples/options-suppressScrollAxis.html
@@ -0,0 +1,43 @@
+<!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/jquery.mousewheel.js"></script>
+      <script src="../src/perfect-scrollbar.js"></script>
+      <style>
+        .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: hidden; }
+        .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+        .spacer { text-align:center }
+        h2 { text-align: center; }
+      </style>
+    <script>
+      jQuery(document).ready(function ($) {
+        "use strict";
+        $('#Default').perfectScrollbar();
+        $('#SuppressScrollX').perfectScrollbar({suppressScrollX: true});
+        $('#SuppressScrollY').perfectScrollbar({suppressScrollY: true});
+      });
+    </script>
+  </head>
+  <body>
+    <h2>Default</h2>
+    <div id="Default" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <h2>suppressScrollX: true</h2>
+    <div id="SuppressScrollX" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <h2>suppressScrollY: true</h2>
+    <div id="SuppressScrollY" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+  </body>
+</html>
+
--- a/examples/reach-the-end-callback.html
+++ b/examples/reach-the-end-callback.html
@@ -0,0 +1,57 @@
+<!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/jquery.mousewheel.js"></script>
+    <script src="../src/perfect-scrollbar.js"></script>
+    <style>
+      #description {
+        border: 1px solid gray;
+        height:150px;
+        width: 400px;
+        overflow: hidden;
+        position: relative;
+      }
+      #status {
+        color: red;
+      }
+    </style>
+    <script type="text/javascript">
+      $(document).ready(function ($) {
+        var $container = $('#description');
+        var $status = $('#status');
+        $container.perfectScrollbar();
+        $container.scroll(function(e) {
+          if($container.scrollTop() === 0) {
+            $status.text('it reaches the top!');
+          }
+          else if ($container.scrollTop() === $container.prop('scrollHeight') - $container.height()) {
+            $status.text('it reaches the end!');
+          } else {
+            $status.text('');
+          }
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="description" class="wrapper">
+      <p>Hello, world! 0</p>
+      <p>Hello, world! 1</p>
+      <p>Hello, world! 2</p>
+      <p>Hello, world! 3</p>
+      <p>Hello, world! 4</p>
+      <p>Hello, world! 5</p>
+      <p>Hello, world! 6</p>
+      <p>Hello, world! 7</p>
+      <p>Hello, world! 8</p>
+      <p>Hello, world! 9</p>
+    </div>
+    <div id="status">
+    </div>
+  </body>
+</html>
--- a/min/perfect-scrollbar-0.4.5.min.js
+++ b/min/perfect-scrollbar-0.4.5.min.js
--- a/min/perfect-scrollbar-0.4.5.with-mousewheel.min.js
+++ b/min/perfect-scrollbar-0.4.5.with-mousewheel.min.js
--- a/min/perfect-scrollbar-0.4.7.min.css
+++ b/min/perfect-scrollbar-0.4.7.min.css
@@ -1,5 +1,5 @@
-/*! perfect-scrollbar - v0.4.5
+/*! perfect-scrollbar - v0.4.7
 * http://noraesae.github.com/perfect-scrollbar/
-* Copyright (c) 2013 HyeonJe Jun; Licensed MIT */
+* Copyright (c) 2014 Hyeonje 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{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{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.ie6 .ps-scrollbar-x{font-size:0}.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.ie .ps-scrollbar-y{font-size:0}.ps-container .ps-scrollbar-y-rail:hover .ps-scrollbar-y,.ps-container .ps-scrollbar-y-rail.hover .ps-scrollbar-y{background-color:#999}
--- a/min/perfect-scrollbar-0.4.7.min.js
+++ b/min/perfect-scrollbar-0.4.7.min.js
--- a/min/perfect-scrollbar-0.4.7.with-mousewheel.min.js
+++ b/min/perfect-scrollbar-0.4.7.with-mousewheel.min.js
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "perfect-scrollbar",
-  "version": "0.4.5",
+  "version": "0.4.7",
  "engines": {
    "node": ">= 0.8.0"
  },
--- a/perfect-scrollbar.jquery.json
+++ b/perfect-scrollbar.jquery.json
@@ -2,9 +2,9 @@
  "name": "perfect-scrollbar",
  "title": "perfect-scrollbar",
  "description": "Tiny but perfect jquery scrollbar plugin.",
-  "version": "0.4.5",
+  "version": "0.4.7",
  "author": {
-    "name": "HyeonJe Jun",
+    "name": "Hyeonje Jun",
    "email": "noraesae@yuiazu.net",
    "url": "https://github.com/noraesae/"
  },
@@ -29,7 +29,7 @@
  "bugs": "https://github.com/noraesae/perfect-scrollbar/issues/",
  "maintainers": [
    {
-      "name": "HyeonJe Jun",
+      "name": "Hyeonje Jun",
      "email": "noraesae@yuiazu.net",
      "url": "https://github.com/noraesae/"
    }
--- a/src/perfect-scrollbar.js
+++ b/src/perfect-scrollbar.js
@@ -18,9 +18,22 @@
    wheelPropagation: false,
    minScrollbarLength: null,
    useBothWheelAxes: false,
-    useKeyboard: true
+    useKeyboard: true,
+    suppressScrollX: false,
+    suppressScrollY: false,
+    scrollXMarginOffset: 0,
+    scrollYMarginOffset: 0
  };

+  var getEventClassName = (function () {
+    var incrementingId = 0;
+    return function () {
+      var id = incrementingId;
+      incrementingId += 1;
+      return '.perfect-scrollbar-' + id;
+    };
+  }());
+
  $.fn.perfectScrollbar = function (suppliedSettings, option) {

    return this.each(function () {
@@ -77,15 +90,42 @@
          scrollbarXBottom = parseInt($scrollbarXRail.css('bottom'), 10),
          scrollbarYHeight,
          scrollbarYTop,
-          scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10);
+          scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10),
+          eventClassName = getEventClassName();
+
+      var updateContentScrollTop = function (currentTop, deltaY) {
+        var newTop = currentTop + deltaY,
+            maxTop = containerHeight - scrollbarYHeight;
+
+        if (newTop < 0) {
+          scrollbarYTop = 0;
+        }
+        else if (newTop > maxTop) {
+          scrollbarYTop = maxTop;
+        }
+        else {
+          scrollbarYTop = newTop;
+        }

-      var updateContentScrollTop = function () {
        var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight), 10);
        $this.scrollTop(scrollTop);
        $scrollbarXRail.css({bottom: scrollbarXBottom - scrollTop});
      };

-      var updateContentScrollLeft = function () {
+      var updateContentScrollLeft = function (currentLeft, deltaX) {
+        var newLeft = currentLeft + deltaX,
+            maxLeft = containerWidth - scrollbarXWidth;
+
+        if (newLeft < 0) {
+          scrollbarXLeft = 0;
+        }
+        else if (newLeft > maxLeft) {
+          scrollbarXLeft = maxLeft;
+        }
+        else {
+          scrollbarXLeft = newLeft;
+        }
+
        var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (containerWidth - scrollbarXWidth), 10);
        $this.scrollLeft(scrollLeft);
        $scrollbarYRail.css({right: scrollbarYRight - scrollLeft});
@@ -99,8 +139,8 @@
      };

      var updateScrollbarCss = function () {
-        $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth});
-        $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight});
+        $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth, display: settings.suppressScrollX ? "none": "inherit"});
+        $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: settings.suppressScrollY ? "none": "inherit"});
        $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth});
        $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight});
      };
@@ -111,7 +151,7 @@
        contentWidth = $this.prop('scrollWidth');
        contentHeight = $this.prop('scrollHeight');

-        if (containerWidth < contentWidth) {
+        if (!settings.suppressScrollX && containerWidth + settings.scrollXMarginOffset < contentWidth) {
          scrollbarXActive = true;
          scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(containerWidth * containerWidth / contentWidth, 10));
          scrollbarXLeft = parseInt($this.scrollLeft() * (containerWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10);
@@ -123,7 +163,7 @@
          $this.scrollLeft(0);
        }

-        if (containerHeight < contentHeight) {
+        if (!settings.suppressScrollY && containerHeight + settings.scrollYMarginOffset < contentHeight) {
          scrollbarYActive = true;
          scrollbarYHeight = getSettingsAdjustedThumbSize(parseInt(containerHeight * containerHeight / contentHeight, 10));
          scrollbarYTop = parseInt($this.scrollTop() * (containerHeight - scrollbarYHeight) / (contentHeight - containerHeight), 10);
@@ -145,45 +185,11 @@
        updateScrollbarCss();
      };

-      var moveBarX = function (currentLeft, deltaX) {
-        var newLeft = currentLeft + deltaX,
-            maxLeft = containerWidth - scrollbarXWidth;
-
-        if (newLeft < 0) {
-          scrollbarXLeft = 0;
-        }
-        else if (newLeft > maxLeft) {
-          scrollbarXLeft = maxLeft;
-        }
-        else {
-          scrollbarXLeft = newLeft;
-        }
-        $scrollbarXRail.css({left: $this.scrollLeft()});
-        $scrollbarX.css({left: scrollbarXLeft});
-      };
-
-      var moveBarY = function (currentTop, deltaY) {
-        var newTop = currentTop + deltaY,
-            maxTop = containerHeight - scrollbarYHeight;
-
-        if (newTop < 0) {
-          scrollbarYTop = 0;
-        }
-        else if (newTop > maxTop) {
-          scrollbarYTop = maxTop;
-        }
-        else {
-          scrollbarYTop = newTop;
-        }
-        $scrollbarYRail.css({top: $this.scrollTop()});
-        $scrollbarY.css({top: scrollbarYTop});
-      };
-
      var bindMouseScrollXHandler = function () {
        var currentLeft,
            currentPageX;

-        $scrollbarX.bind('mousedown.perfect-scrollbar', function (e) {
+        $scrollbarX.bind('mousedown' + eventClassName, function (e) {
          currentPageX = e.pageX;
          currentLeft = $scrollbarX.position().left;
          $scrollbarXRail.addClass('in-scrolling');
@@ -191,16 +197,15 @@
          e.preventDefault();
        });

-        $(document).bind('mousemove.perfect-scrollbar', function (e) {
+        $(document).bind('mousemove' + eventClassName, function (e) {
          if ($scrollbarXRail.hasClass('in-scrolling')) {
-            updateContentScrollLeft();
-            moveBarX(currentLeft, e.pageX - currentPageX);
+            updateContentScrollLeft(currentLeft, e.pageX - currentPageX);
            e.stopPropagation();
            e.preventDefault();
          }
        });

-        $(document).bind('mouseup.perfect-scrollbar', function (e) {
+        $(document).bind('mouseup' + eventClassName, function (e) {
          if ($scrollbarXRail.hasClass('in-scrolling')) {
            $scrollbarXRail.removeClass('in-scrolling');
          }
@@ -214,7 +219,7 @@
        var currentTop,
            currentPageY;

-        $scrollbarY.bind('mousedown.perfect-scrollbar', function (e) {
+        $scrollbarY.bind('mousedown' + eventClassName, function (e) {
          currentPageY = e.pageY;
          currentTop = $scrollbarY.position().top;
          $scrollbarYRail.addClass('in-scrolling');
@@ -222,16 +227,15 @@
          e.preventDefault();
        });

-        $(document).bind('mousemove.perfect-scrollbar', function (e) {
+        $(document).bind('mousemove' + eventClassName, function (e) {
          if ($scrollbarYRail.hasClass('in-scrolling')) {
-            updateContentScrollTop();
-            moveBarY(currentTop, e.pageY - currentPageY);
+            updateContentScrollTop(currentTop, e.pageY - currentPageY);
            e.stopPropagation();
            e.preventDefault();
          }
        });

-        $(document).bind('mouseup.perfect-scrollbar', function (e) {
+        $(document).bind('mouseup' + eventClassName, function (e) {
          if ($scrollbarYRail.hasClass('in-scrolling')) {
            $scrollbarYRail.removeClass('in-scrolling');
          }
@@ -241,29 +245,34 @@
        currentPageY = null;
      };

+      // check if the default scrolling should be prevented.
+      var shouldPreventDefault = function (deltaX, deltaY) {
+        var scrollTop = $this.scrollTop();
+        if (deltaX === 0) {
+          if (!scrollbarYActive) {
+            return false;
+          }
+          if ((scrollTop === 0 && deltaY > 0) || (scrollTop >= contentHeight - containerHeight && deltaY < 0)) {
+            return !settings.wheelPropagation;
+          }
+        }
+
+        var scrollLeft = $this.scrollLeft();
+        if (deltaY === 0) {
+          if (!scrollbarXActive) {
+            return false;
+          }
+          if ((scrollLeft === 0 && deltaX < 0) || (scrollLeft >= contentWidth - containerWidth && deltaX > 0)) {
+            return !settings.wheelPropagation;
+          }
+        }
+        return true;
+      };
+
      // bind handlers
      var bindMouseWheelHandler = function () {
-        var shouldPreventDefault = function (deltaX, deltaY) {
-          var scrollTop = $this.scrollTop();
-          if (scrollTop === 0 && deltaY > 0 && deltaX === 0) {
-            return !settings.wheelPropagation;
-          }
-          else if (scrollTop >= contentHeight - containerHeight && deltaY < 0 && deltaX === 0) {
-            return !settings.wheelPropagation;
-          }
-
-          var scrollLeft = $this.scrollLeft();
-          if (scrollLeft === 0 && deltaX < 0 && deltaY === 0) {
-            return !settings.wheelPropagation;
-          }
-          else if (scrollLeft >= contentWidth - containerWidth && deltaX > 0 && deltaY === 0) {
-            return !settings.wheelPropagation;
-          }
-          return true;
-        };
-
        var shouldPrevent = false;
-        $this.bind('mousewheel.perfect-scrollbar', function (e, delta, deltaX, deltaY) {
+        $this.bind('mousewheel' + eventClassName, function (e, delta, deltaX, deltaY) {
          if (!settings.useBothWheelAxes) {
            // deltaX will only be used for horizontal scrolling and deltaY will
            // only be used for vertical scrolling - this is the default
@@ -297,7 +306,7 @@
        });

        // fix Firefox scroll problem
-        $this.bind('MozMousePixelScroll.perfect-scrollbar', function (e) {
+        $this.bind('MozMousePixelScroll' + eventClassName, function (e) {
          if (shouldPrevent) {
            e.preventDefault();
          }
@@ -305,35 +314,16 @@
      };

      var bindKeyboardHandler = function () {
-        var shouldPreventDefault = function (deltaX, deltaY) {
-          var scrollTop = $this.scrollTop();
-          if (scrollTop === 0 && deltaY > 0 && deltaX === 0) {
-            return false;
-          }
-          else if (scrollTop >= contentHeight - containerHeight && deltaY < 0 && deltaX === 0) {
-            return false;
-          }
-
-          var scrollLeft = $this.scrollLeft();
-          if (scrollLeft === 0 && deltaX < 0 && deltaY === 0) {
-            return false;
-          }
-          else if (scrollLeft >= contentWidth - containerWidth && deltaX > 0 && deltaY === 0) {
-            return false;
-          }
-          return true;
-        };
-
        var hovered = false;
-        $this.bind('mouseenter.perfect-scrollbar', function (e) {
+        $this.bind('mouseenter' + eventClassName, function (e) {
          hovered = true;
        });
-        $this.bind('mouseleave.perfect-scrollbar', function (e) {
+        $this.bind('mouseleave' + eventClassName, function (e) {
          hovered = false;
        });

        var shouldPrevent = false;
-        $(document).bind('keydown.perfect-scrollbar', function (e) {
+        $(document).bind('keydown' + eventClassName, function (e) {
          if (!hovered) {
            return;
          }
@@ -354,6 +344,19 @@
          case 40: // down
            deltaY = -3;
            break;
+          case 33: // page up
+            deltaY = 9;
+            break;
+          case 32: // space bar
+          case 34: // page down
+            deltaY = -9;
+            break;
+          case 35: // end
+            deltaY = -containerHeight;
+            break;
+          case 36: // home
+            deltaY = containerHeight;
+            break;
          default:
            return;
          }
@@ -361,9 +364,6 @@
          $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed));
          $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed));

-          // update bar position
-          updateBarSizeAndPosition();
-
          shouldPrevent = shouldPreventDefault(deltaX, deltaY);
          if (shouldPrevent) {
            e.preventDefault();
@@ -374,8 +374,8 @@
      var bindRailClickHandler = function () {
        var stopPropagation = function (e) { e.stopPropagation(); };

-        $scrollbarY.bind('click.perfect-scrollbar', stopPropagation);
-        $scrollbarYRail.bind('click.perfect-scrollbar', function (e) {
+        $scrollbarY.bind('click' + eventClassName, stopPropagation);
+        $scrollbarYRail.bind('click' + eventClassName, function (e) {
          var halfOfScrollbarLength = parseInt(scrollbarYHeight / 2, 10),
              positionTop = e.pageY - $scrollbarYRail.offset().top - halfOfScrollbarLength,
              maxPositionTop = containerHeight - scrollbarYHeight,
@@ -388,13 +388,10 @@
          }

          $this.scrollTop((contentHeight - containerHeight) * positionRatio);
-
-          // update bar position
-          updateBarSizeAndPosition();
        });

-        $scrollbarX.bind('click.perfect-scrollbar', stopPropagation);
-        $scrollbarXRail.bind('click.perfect-scrollbar', function (e) {
+        $scrollbarX.bind('click' + eventClassName, stopPropagation);
+        $scrollbarXRail.bind('click' + eventClassName, function (e) {
          var halfOfScrollbarLength = parseInt(scrollbarXWidth / 2, 10),
              positionLeft = e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength,
              maxPositionLeft = containerWidth - scrollbarXWidth,
@@ -407,9 +404,6 @@
          }

          $this.scrollLeft((contentWidth - containerWidth) * positionRatio);
-
-          // update bar position
-          updateBarSizeAndPosition();
        });
      };

@@ -429,14 +423,14 @@
            breakingProcess = null,
            inGlobalTouch = false;

-        $(window).bind("touchstart.perfect-scrollbar", function (e) {
+        $(window).bind("touchstart" + eventClassName, function (e) {
          inGlobalTouch = true;
        });
-        $(window).bind("touchend.perfect-scrollbar", function (e) {
+        $(window).bind("touchend" + eventClassName, function (e) {
          inGlobalTouch = false;
        });

-        $this.bind("touchstart.perfect-scrollbar", function (e) {
+        $this.bind("touchstart" + eventClassName, function (e) {
          var touch = e.originalEvent.targetTouches[0];

          startCoords.pageX = touch.pageX;
@@ -450,7 +444,7 @@

          e.stopPropagation();
        });
-        $this.bind("touchmove.perfect-scrollbar", function (e) {
+        $this.bind("touchmove" + eventClassName, function (e) {
          if (!inGlobalTouch && e.originalEvent.targetTouches.length === 1) {
            var touch = e.originalEvent.targetTouches[0];

@@ -472,7 +466,7 @@
            e.preventDefault();
          }
        });
-        $this.bind("touchend.perfect-scrollbar", function (e) {
+        $this.bind("touchend" + eventClassName, function (e) {
          clearInterval(breakingProcess);
          breakingProcess = setInterval(function () {
            if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
@@ -488,10 +482,16 @@
        });
      };

+      var bindScrollHandler = function () {
+        $this.bind('scroll' + eventClassName, function (e) {
+          updateBarSizeAndPosition();
+        });
+      };
+
      var destroy = function () {
-        $this.unbind('.perfect-scrollbar');
-        $(window).unbind('.perfect-scrollbar');
-        $(document).unbind('.perfect-scrollbar');
+        $this.unbind(eventClassName);
+        $(window).unbind(eventClassName);
+        $(document).unbind(eventClassName);
        $this.data('perfect-scrollbar', null);
        $this.data('perfect-scrollbar-update', null);
        $this.data('perfect-scrollbar-destroy', null);
@@ -525,11 +525,11 @@
          var mouseleave = function () {
            $(this).removeClass('hover');
          };
-          $this.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
-          $scrollbarXRail.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
-          $scrollbarYRail.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
-          $scrollbarX.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
-          $scrollbarY.bind('mouseenter.perfect-scrollbar', mouseenter).bind('mouseleave.perfect-scrollbar', mouseleave);
+          $this.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+          $scrollbarXRail.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+          $scrollbarYRail.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+          $scrollbarX.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
+          $scrollbarY.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave);
        };

        var fixIe6ScrollbarPosition = function () {
@@ -539,17 +539,6 @@
            $scrollbarX.hide().show();
            $scrollbarY.hide().show();
          };
-          updateContentScrollTop = function () {
-            var scrollTop = parseInt(scrollbarYTop * contentHeight / containerHeight, 10);
-            $this.scrollTop(scrollTop);
-            $scrollbarX.css({bottom: scrollbarXBottom});
-            $scrollbarX.hide().show();
-          };
-          updateContentScrollLeft = function () {
-            var scrollLeft = parseInt(scrollbarXLeft * contentWidth / containerWidth, 10);
-            $this.scrollLeft(scrollLeft);
-            $scrollbarY.hide().show();
-          };
        };

        if (version === 6) {
@@ -568,6 +557,7 @@
        }

        updateBarSizeAndPosition();
+        bindScrollHandler();
        bindMouseScrollXHandler();
        bindMouseScrollYHandler();
        bindRailClickHandler();
Author	SHA1	Message	Date
Hyunje Alex Jun	e159cbbda5	Release 0.4.7. 1. Don't prevent the default scrolling for the inactive axis. 2. Enhance the scrolling logic. 3. Implement Home, End, Page Up, Page Down and Spacebar for the key scrolling. 4. Bug fixes.	2014-01-21 12:30:13 +09:00
Hyunje Alex Jun	b8d8218c03	Add a getEventClassName() function. Each scrollbar object should have its own event class name. Unless, When the one scrollbar is destroyed, another one's event will be unbinded too. The getEventClassName() function returns a unique event class name.	2014-01-21 12:22:04 +09:00
Hyunje Alex Jun	d58e109d98	Add an example about the callback to check if it reaches the end.	2014-01-21 11:57:30 +09:00
Hyunje Alex Jun	de3bc97437	Merge pull request #92 from asiviero/master Implement Home, End, Page Up, Page Down and Spacebar.	2014-01-20 18:55:54 -08:00
Andre Siviero	63c6d67ad5	Implemments Home, End, pageUp, pageDown and Spacebar	2014-01-20 20:14:26 -02:00
Hyunje Alex Jun	40b46a4071	Change the scrolling logic. Add a scroll handler to handle the previously unhandled events, and remove updateBarSizeAndPosition() where it's not needed anymore.	2014-01-15 00:23:21 +09:00
Hyunje Alex Jun	71838b9f72	Don't prevent the default scrolling for the inactive axis.	2013-12-14 16:33:15 +09:00
Hyunje Alex Jun	693bc9b784	Change the names in perfect-scrollbar.jquery.json. Change 'J' to 'j'.	2013-12-06 11:41:08 +09:00
Hyunje Alex Jun	23722670c2	Release 0.4.6. 1. Following options are added. - suppressScrollX, suppressScrollY, scrollXMarginOffset and scrollYMarginOffset	2013-12-06 11:28:41 +09:00
Hyunje Alex Jun	e390a89f57	Add an example for the scroll suppression feature. The 'suppressScrollX' and 'suppressScrollY' features were added and this patch add the example for the features.	2013-12-06 11:25:48 +09:00
Hyunje Alex Jun	6595d602b1	Merge pull request #77 from adrianonantua/master Added 4 new setting options (suppressScrollX, suppressScrollY, scrollXMarginOffset and scrollYMarginOffset)	2013-12-05 18:25:25 -08:00
Adrian Carneiro	05fadaa786	README.md formatting	2013-11-06 15:28:39 -05:00
Adrian Carneiro	fa806adb55	Added 4 new setting options (suppressScrollX, suppressScrollY, scrollXMarginOffset and scrollYMarginOffset) Added 4 new setting options (suppressScrollX, suppressScrollY, scrollXMarginOffset and scrollYMarginOffset)	2013-11-06 15:20:30 -05:00