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
9 changed files with 186 additions and 71 deletions
--- 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.  
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
  "name": "perfect-scrollbar",
-  "version": "0.5.7",
+  "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/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,4 +1,4 @@
-/*! perfect-scrollbar - v0.5.7
+/*! perfect-scrollbar - v0.5.8
 * http://noraesae.github.com/perfect-scrollbar/
 * Copyright (c) 2014 Hyunje Alex Jun; Licensed MIT */

--- a/min/perfect-scrollbar.min.js
+++ b/min/perfect-scrollbar.min.js
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "perfect-scrollbar",
-  "version": "0.5.7",
+  "version": "0.5.8",
  "description": "Tiny but perfect jquery scrollbar plugin.",
  "author": "Hyunje Alex Jun <me@noraesae.net>",
  "contributors": [
--- 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.7",
+  "version": "0.5.8",
  "author": {
    "name": "Hyunje Alex Jun",
    "email": "me@noraesae.net",
--- 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,6 +53,8 @@
    };
  };

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

    return this.each(function () {
@@ -105,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;
@@ -132,7 +139,7 @@
          scrollbarYTop = newTop;
        }

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

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

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

@@ -163,7 +170,7 @@
      }

      function updateCss() {
-        var xRailOffset = {width: containerWidth};
+        var xRailOffset = {width: railXWidth};
        if (isRtl) {
          xRailOffset.left = $this.scrollLeft() + containerWidth - contentWidth;
        } else {
@@ -176,7 +183,7 @@
        }
        $scrollbarXRail.css(xRailOffset);

-        var railYOffset = {top: $this.scrollTop(), height: containerHeight};
+        var railYOffset = {top: $this.scrollTop(), height: railYHeight};

        if (isScrollbarYUsingRight) {
          if (isRtl) {
@@ -209,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;
@@ -220,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;
@@ -229,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();
@@ -250,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;
      }
@@ -284,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) {
@@ -338,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;

@@ -367,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];
@@ -400,7 +436,7 @@

          updateGeometry();

-          shouldPrevent = (shouldPrevent || shouldPreventDefault(deltaX, deltaY));
+          shouldPrevent = (shouldPrevent || shouldPreventWheel(deltaX, deltaY));
          if (shouldPrevent) {
            e.stopPropagation();
            e.preventDefault();
@@ -486,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();
          }
@@ -498,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;
@@ -514,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;
@@ -708,8 +744,10 @@
              startTime = currentTime;
            }

-            e.stopPropagation();
-            e.preventDefault();
+            if (shouldPreventSwipe(differenceX, differenceY)) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
          }
        }
        function touchEnd(e) {
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