Release 0.3.2.

Patch notes 1. Optional parameter support. - wheelSpeed - wheelPropagation 2. Example codes added.
Update README.md
2013-03-14 15:14:38 +09:00 · 2013-03-14 13:44:51 +09:00 · 2013-03-14 11:49:50 +09:00 · 2013-03-14 11:36:57 +09:00 · 2013-02-16 00:23:49 +09:00 · 2013-02-16 00:17:23 +09:00
11 changed files with 344 additions and 13 deletions
--- a/README.md
+++ b/README.md
@@ -39,12 +39,26 @@ It's cool, isn't it?
 Requirements
 ------------

-To make this plugin *perfect*, some requirements was not avoidable. But they're all very trivial and there's nothing to worry.
+To make this plugin *perfect*, some requirements were not avoidable. But they're all very trivial and there's nothing to worry about.

 * there must be the *one* content element(like div) for the container.
 * the container must have a 'position' css style.
 * the scrollbar's position must be 'absolute'.
 * the scrollbar-x must have a 'bottom' css style, and the scrollbar-y must have a 'right' css style.
+ 
+Optional parameters
+-------------------
+
+perfect-scrollbar supports optional parameters.
+
+### wheelSpeed
+The scroll speed applied to mousewheel event.  
+Default: 10
+
+### wheelPropagation
+If this option is true, when the scroll reach the end of the side, mousewheel event will be propagated to parent element.  
+Default: false
+

 How to Use
 ----------
@@ -63,6 +77,15 @@ When the html document is like above, just use like this:
 ```javascript
 $('#Demo').perfectScrollbar();
 ```
+
+With optional parameters:
+```javascript
+$("#Demo").perfectScrollbar({
+  wheelSpeed: 20,
+  wheelPropagation: true
+})
+```
+
 If the size of your container or content changes:
 ```javascript
 $('#Demo').perfectScrollbar('update');
@@ -72,6 +95,12 @@ If you want to destory the scrollbar:
 $('#Demo').perfectScrollbar('destroy');
 ```

+If you want to scroll to somewhere, just use scroll-top css and update.
+```javascript
+$("#Demo").scrollTop(0);
+$("#Demo").perfectScrollbar('update');
+```
+
 Very helpful friends
 --------------------

--- a/3
+++ b/3
@@ -1,3 +1,4 @@
 #!/bin/sh
-uglifyjs src/perfect-scrollbar.js > min/perfect-scrollbar.min.js
+uglifyjs src/perfect-scrollbar.js -o min/perfect-scrollbar.min.js
+uglifyjs src/perfect-scrollbar.js src/jquery.mousewheel.js -o min/perfect-scrollbar.with-mousewheel.min.js
 cleancss src/perfect-scrollbar.css -o min/perfect-scrollbar.min.css
--- a/examples/azusa.jpg
+++ b/examples/azusa.jpg
--- a/examples/options-default.html
+++ b/examples/options-default.html
@@ -0,0 +1,29 @@
+<!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.8.0/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 }
+        </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/examples/options-wheelPropagation.html
+++ b/examples/options-wheelPropagation.html
@@ -0,0 +1,40 @@
+<!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 - use wheelPropagation to control propagation of scrolling at extremities</title>
+        <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/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 }
+        </style>
+    <script>
+      jQuery(document).ready(function ($) {
+        "use strict";
+        $('#Default').perfectScrollbar();
+        $('#NoWheelPropagation').perfectScrollbar({wheelPropagation:true});
+      });
+    </script>
+  </head>
+  <body>
+    <h1 style="text-align:center">Default; wheelPropagation:false</h1>
+    <div id="Default" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <h1 style="text-align:center">wheelPropagation:true</h1>
+    <div id="NoWheelPropagation" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <div class="spacer">
+      Note<br>that<br>there<br>is<br>plenty<br>of<br>text<br>after<br>the<br>image<br>to<br>ensure<br>that<br>it<br>is<br>possible<br>to<br>down<br>
+      after<br>the<br>bottom<br>of<br>the<br>image<br>has<br>been<br>reached<br>to<br>enable<br>the<br>wheel<br>propagation<br>to<br>be<br>tested<br>
+    </div>
+  </body>
+</html>
+
--- a/examples/options-wheelSpeed.html
+++ b/examples/options-wheelSpeed.html
@@ -0,0 +1,42 @@
+<!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 - use wheelSpeed to change speed of scrolling</title>
+        <link href="../src/perfect-scrollbar.css" rel="stylesheet">
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/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 }
+        </style>
+    <script>
+      jQuery(document).ready(function ($) {
+        "use strict";
+        $('#Default').perfectScrollbar();
+        $('#FastWheelSpeed').perfectScrollbar({wheelSpeed:100});
+        $('#SlowWheelSpeed').perfectScrollbar({wheelSpeed:1});
+      });
+    </script>
+  </head>
+  <body>
+    <h1 style="text-align:center">Default; wheelSpeed:10</h1>
+    <div id="Default" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <h1 style="text-align:center">Fast: wheelSpeed:100</h1>
+    <div id="FastWheelSpeed" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+    <h1 style="text-align:center">Slow: wheelSpeed:1</h1>
+    <div id="SlowWheelSpeed" class="contentHolder">
+      <div class="content">
+      </div>
+    </div>
+  </body>
+</html>
+
--- a/min/perfect-scrollbar.min.js
+++ b/min/perfect-scrollbar.min.js
--- a/min/perfect-scrollbar.with-mousewheel.min.js
+++ b/min/perfect-scrollbar.with-mousewheel.min.js
--- 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.2.4",
+  "version": "0.3.2",
  "author": {
    "name": "HyeonJe Jun",
    "email": "noraesae@yuiazu.net",
--- a/src/jquery.mousewheel.js
+++ b/src/jquery.mousewheel.js
@@ -0,0 +1,84 @@
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ * 
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+    for ( var i=types.length; i; ) {
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+    }
+}
+
+$.event.special.mousewheel = {
+    setup: function() {
+        if ( this.addEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.addEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = handler;
+        }
+    },
+    
+    teardown: function() {
+        if ( this.removeEventListener ) {
+            for ( var i=types.length; i; ) {
+                this.removeEventListener( types[--i], handler, false );
+            }
+        } else {
+            this.onmousewheel = null;
+        }
+    }
+};
+
+$.fn.extend({
+    mousewheel: function(fn) {
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+    },
+    
+    unmousewheel: function(fn) {
+        return this.unbind("mousewheel", fn);
+    }
+});
+
+
+function handler(event) {
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+    event = $.event.fix(orgEvent);
+    event.type = "mousewheel";
+    
+    // Old school scrollwheel delta
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
+    
+    // New school multidimensional scroll (touchpads) deltas
+    deltaY = delta;
+    
+    // Gecko
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+        deltaY = 0;
+        deltaX = -1*delta;
+    }
+    
+    // Webkit
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+    
+    // Add event and delta to the front of the arguments
+    args.unshift(event, delta, deltaX, deltaY);
+    
+    return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);
--- a/src/perfect-scrollbar.js
+++ b/src/perfect-scrollbar.js
@@ -2,7 +2,25 @@
 * Licensed under the MIT License
 */
 ((function($) {
-    $.fn.perfectScrollbar = function(option) {
+
+    // The default settings for the plugin
+    var defaultSettings = {
+        wheelSpeed: 10,
+        wheelPropagation: false
+    };
+
+    $.fn.perfectScrollbar = function(suppliedSettings, option) {
+
+        // Use the default settings
+        var settings = $.extend( true, {}, defaultSettings );
+        if (typeof suppliedSettings === "object") {
+            // But over-ride any supplied
+            $.extend( true, settings, suppliedSettings );
+        } else {
+            // If no settings were supplied, then the first param must be the option
+            option = suppliedSettings;
+        }
+
        if(option === 'update') {
            if($(this).data('perfect_scrollbar_update')) {
                $(this).data('perfect_scrollbar_update')();
@@ -51,8 +69,8 @@
        var updateBarSizeAndPosition = function() {
            container_width = $this.width();
            container_height = $this.height();
-            content_width = $content.width();
-            content_height = $content.height();
+            content_width = $content.outerWidth(false);
+            content_height = $content.outerHeight(false);
            if(container_width < content_width) {
                scrollbar_x_width = parseInt(container_width * container_width / content_width);
                scrollbar_x_left = parseInt($this.scrollLeft() * container_width / content_width);
@@ -60,6 +78,7 @@
            else {
                scrollbar_x_width = 0;
                scrollbar_x_left = 0;
+                $this.scrollLeft(0);
            }
            if(container_height < content_height) {
                scrollbar_y_height = parseInt(container_height * container_height / content_height);
@@ -68,6 +87,7 @@
            else {
                scrollbar_y_height = 0;
                scrollbar_y_left = 0;
+                $this.scrollTop(0);
            }

            $scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft(), bottom: scrollbar_x_bottom - $this.scrollTop(), width: scrollbar_x_width});
@@ -88,7 +108,7 @@
                scrollbar_x_left = new_left;
            }
            $scrollbar_x.css({left: scrollbar_x_left + $this.scrollLeft()});
-        }
+        };

        var moveBarY = function(current_top, delta_y) {
            var new_top = current_top + delta_y,
@@ -164,23 +184,107 @@

        // 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 >= content_height - container_height && deltaY < 0 && deltaX == 0) {
+                    return !settings["wheelPropagation"];
+                }
+
+                var scrollLeft = $this.scrollLeft();
+                if(scrollLeft == 0 && deltaX < 0 && deltaY == 0) {
+                    return !settings["wheelPropagation"];
+                }
+                else if(scrollLeft >= content_width - container_width && deltaX > 0 && deltaY == 0) {
+                    return !settings["wheelPropagation"];
+                }
+                return true;
+            };
+
            $this.mousewheel(function(e, delta, deltaX, deltaY) {
-                $this.scrollTop($this.scrollTop() - (deltaY * 10));
-                $this.scrollLeft($this.scrollLeft() + (deltaX * 10));
+                $this.scrollTop($this.scrollTop() - (deltaY * settings["wheelSpeed"]));
+                $this.scrollLeft($this.scrollLeft() + (deltaX * settings["wheelSpeed"]));

                // update bar position
                updateBarSizeAndPosition();

-                if(content_height > container_height || content_width > container_width) {
+                if(shouldPreventDefault(deltaX, deltaY)) {
                    e.preventDefault();
                }
            });
        };

+        // bind mobile touch handler
+        var bindMobileTouchHandler = function() {
+            var applyTouchMove = function(difference_x, difference_y) {
+                $this.scrollTop($this.scrollTop() - difference_y);
+                $this.scrollLeft($this.scrollLeft() - difference_x);
+
+                // update bar position
+                updateBarSizeAndPosition();
+            };
+
+            var start_coords = {},
+                start_time = 0,
+                speed = {},
+                breaking_process = null;
+
+            $this.bind("touchstart.perfect-scroll", function(e) {
+                var touch = e.originalEvent.targetTouches[0];
+
+                start_coords.pageX = touch.pageX;
+                start_coords.pageY = touch.pageY;
+
+                start_time = (new Date()).getTime();
+
+                if (breaking_process !== null) {
+                    clearInterval(breaking_process);
+                }
+            });
+            $this.bind("touchmove.perfect-scroll", function(e) {
+                var touch = e.originalEvent.targetTouches[0];
+
+                var current_coords = {};
+                current_coords.pageX = touch.pageX;
+                current_coords.pageY = touch.pageY;
+
+                var difference_x = current_coords.pageX - start_coords.pageX,
+                    difference_y = current_coords.pageY - start_coords.pageY;
+
+                applyTouchMove(difference_x, difference_y);
+                start_coords = current_coords;
+
+                var current_time = (new Date()).getTime();
+                speed.x = difference_x / (current_time - start_time);
+                speed.y = difference_y / (current_time - start_time);
+                start_time = current_time;
+
+                e.preventDefault();
+            });
+            $this.bind("touchend.perfect-scroll", function(e) {
+                breaking_process = setInterval(function() {
+                    if(Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) {
+                        clearInterval(breaking_process);
+                        return;
+                    }
+
+                    applyTouchMove(speed.x * 30, speed.y * 30);
+
+                    speed.x *= 0.8;
+                    speed.y *= 0.8;
+                }, 10);
+            });
+        };
+
        var destroy = function() {
            $scrollbar_x.remove();
            $scrollbar_y.remove();
            $this.unbind('mousewheel');
+            $this.unbind('touchstart.perfect-scroll');
+            $this.unbind('touchmove.perfect-scroll');
+            $this.unbind('touchend.perfect-scroll');
            $(window).unbind('mousemove.perfect-scroll');
            $(window).unbind('mouseup.perfect-scroll');
            $this.data('perfect_scrollbar', null);
@@ -188,10 +292,13 @@
            $this.data('perfect_scrollbar_destroy', null);
        };

+        var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
+
        var initialize = function() {
            updateBarSizeAndPosition();
            bindMouseScrollXHandler();
            bindMouseScrollYHandler();
+            if(isMobile) bindMobileTouchHandler();
            if($this.mousewheel) bindMouseWheelHandler();
            $this.data('perfect_scrollbar', $this);
            $this.data('perfect_scrollbar_update', updateBarSizeAndPosition);
Author	SHA1	Message	Date
Hyunje Alex Jun	960468fc9e	Release 0.3.2. Patch notes 1. Optional parameter support. - wheelSpeed - wheelPropagation 2. Example codes added.	2013-03-14 15:14:38 +09:00
Hyunje Alex Jun	42d528a839	Update README.md Optional parameter support.	2013-03-14 13:44:51 +09:00
Hyunje Alex Jun	26e9ff1cac	Example codes added by @GregDThomas.	2013-03-14 11:49:50 +09:00
GregDThomas	38b8b818e8	See issue #10 - provide support for optional settings, including prevention of the mousewheel event and the speed of scrolling	2013-03-14 11:36:57 +09:00
Hyunje Alex Jun	938f3134d7	Release 0.3.1. Patch notes 1. Mobile touch support. 2. Scrolling logic enhancement. 3. Bug fix.	2013-02-16 00:23:49 +09:00
Hyunje Alex Jun	aa213398f3	Enhance scroll preventDefault logic. Now scroll preventDefault works more like default browser scroll. When the scroll leaches top, bottom, left and right end, don't prevent default scrolling. For sure, when the content size is smaller than the container size, also don't prevent default scrolling.	2013-02-16 00:17:23 +09:00
Hyunje Alex Jun	1cdbc9509f	Fix missed ';' In JavaScript, it's the convension that ';' is placed at the end of statement	2013-02-15 23:58:57 +09:00
David	627b6a6b81	Take into account padding and margins on content Changed the height and widths calculations of the content div to include any padding and/or margins. outerHeight(true) is changed to outerHeight(false). outerWidth is changed as same. Fixed by noraesae.	2013-02-15 23:44:20 +09:00
Hyunje Alex Jun	0099bb556c	Supports the mobile touch scrolling. Using touch events, support mobile scrolling with touch.	2013-02-12 22:37:45 +09:00
Hyunje Alex Jun	2e1e9f2f75	Release 0.2.5. Patch notes 1. Bug fix. 2. Include min version with jquery-mousewheel.	2013-02-08 10:38:43 +09:00
Hyunje Alex Jun	f3b6fd520c	Modify build script to uglifyjs2. Upgrade to uglifyjs2 and add shell script to create a min version source that includes jquery-mousewheel.	2013-02-08 10:36:01 +09:00
Hyunje Alex Jun	a6bb9d02a3	Include jquery-mousewheel in src.	2013-02-08 10:35:34 +09:00
Hyunje Alex Jun	639f369d33	Merge pull request #2 from davidkethel/patch-2 Ensure div is at top/left when scroll bars removed	2013-02-07 17:07:19 -08:00
David	dacb601f9f	Update src/perfect_scrollbar.js Ensure the panel is at the top after an update where the scroll bars are removed. Other wise it is possible to get stuck midway down a panel with no way of scrolling.	2013-02-07 14:29:44 +10:00
Hyunje Alex Jun	0c9dc8dbb4	Merge pull request #1 from davidkethel/patch-1 Just a couple of small grammar changes	2013-02-06 05:44:16 -08:00
David	f32e32485b	Just a couple of small grammar changes	2013-02-06 20:02:02 +10:00
Hyunje Alex Jun	a4bee31597	Update README.md Add the way how to scroll to somewhere.	2013-01-28 14:00:49 +09:00