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
9 changed files with 162 additions and 10 deletions
--- a/README.md
+++ b/README.md
@@ -45,6 +45,20 @@ To make this plugin *perfect*, some requirements were not avoidable. But they're
 * 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');
--- 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.3.1",
+  "version": "0.3.2",
  "author": {
    "name": "HyeonJe Jun",
    "email": "noraesae@yuiazu.net",
--- 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')();
@@ -169,25 +187,25 @@
            var shouldPreventDefault = function(deltaX, deltaY) {
                var scrollTop = $this.scrollTop();
                if(scrollTop == 0 && deltaY > 0 && deltaX == 0) {
-                    return false;
+                    return !settings["wheelPropagation"];
                }
                else if(scrollTop >= content_height - container_height && deltaY < 0 && deltaX == 0) {
-                    return false;
+                    return !settings["wheelPropagation"];
                }

                var scrollLeft = $this.scrollLeft();
                if(scrollLeft == 0 && deltaX < 0 && deltaY == 0) {
-                    return false;
+                    return !settings["wheelPropagation"];
                }
                else if(scrollLeft >= content_width - container_width && deltaX > 0 && deltaY == 0) {
-                    return false;
+                    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();
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