Updated to version 2.1.8

README.md

@@ -3,7 +3,7 @@ jquery-tinyscrollbar
 
 Tiny Scrollbar is a nice and elegant way to enable the scrolling of content on mobile and desktop devices. Its designed to be a dynamic lightweight utility. Furthermore it gives a User Interface Designer a powerful way of enhancing the Ui (user interface) of a website.
 
-It comes in 2 flavors as a vanilla Javascript microlib and a jQuery plugin. The jQuery plugin does not need any other external libaries like jQuery Ui.
+It comes in 2 flavours as a vanilla Javascript microlib and a jQuery plugin. The jQuery plugin does not need any other external libraries like jQuery Ui.
 
 Browser support differs between the jQuery plugin and the plain Javascript microlib. Specifically, the plain Javascript microlib does not support legacy browsers such as IE6-8. Use the jQuery plugin release if support for those browsers is required.
 
@@ -21,10 +21,15 @@ Browser support differs between the jQuery plugin and the plain Javascript micro
 * Examples can be seen on this page, by downloading the zip or here
 * Lightweight
 
-#### License
+#### Examples
 
-Tinyscrollbar is a free script its licensed under the MIT license.
+The examples below are all for the jQuery Plugin. If you need some more (advanced) [examples you can find them here](http://baijs.com/tinyscrollbar/examples/). You can also find a example for the plain javascript library there.
 
 #### Source
 
 The latest source is available on [GitHub](https://github.com/wieringen/tinyscrollbar).
+
+#### License
+
+Tinyscrollbar is a free script its licensed under the MIT license.
+

infinite/index.html

@@ -6,10 +6,10 @@
         <meta charset="utf-8">
         <meta name="description" content="A crossbrowser lightweight javascript/jQuery scrollbar." />
 
-        <link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
+        <link rel="stylesheet" href="tinyscrollbar.css" type="text/css" media="screen"/>
 
         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-        <script type="text/javascript" src="js/jquery.tinyscrollbar.js"></script>
+        <script type="text/javascript" src="jquery.tinyscrollbar.js"></script>
         <script type="text/javascript">
             $(document).ready(function()
             {
@@ -37,7 +37,7 @@
                     {
                         loadingData = true;
 
-                        $.getJSON("json/data.json", function(data)
+                        $.getJSON("data.json", function(data)
                         {
                             loadingData = false;
 

responsive/js/jquery.tinyscrollbar.js → infinite/jquery.tinyscrollbar.js

@@ -2,30 +2,31 @@
 {
     if (typeof define === 'function' && define.amd)
     {
-        // AMD. Register as an anonymous module.
         define(['jquery'], factory);
-    } else if (typeof exports === 'object')
+    }
+    else if (typeof exports === 'object')
     {
-        // Node/CommonJS
         factory(require('jquery'));
-    } else
+    }
+    else
     {
-        // Browser globals
         factory(jQuery);
     }
-}(function ($)
+}
+(function ($)
 {
+    "use strict";
 
     var pluginName = "tinyscrollbar"
     ,   defaults   =
         {
-            axis           : 'y'           // vertical or horizontal scrollbar? ( x || y ).
-        ,   wheel          : true          // enable or disable the mousewheel;
-        ,   wheelSpeed     : 40            // how many pixels must the mouswheel scroll at a time.
-        ,   wheelLock      : true          // return mouswheel to browser if there is no more content.
-        ,   scrollInvert   : false         // Enable invert style scrolling
-        ,   trackSize      : false         // set the size of the scrollbar to auto or a fixed number.
-        ,   thumbSize      : false         // set the size of the thumb to auto or a fixed number.
+            axis         : 'y'    // Vertical or horizontal scrollbar? ( x || y ).
+        ,   wheel        : true   // Enable or disable the mousewheel;
+        ,   wheelSpeed   : 40     // How many pixels must the mouswheel scroll at a time.
+        ,   wheelLock    : true   // Lock default scrolling window when there is no more content.
+        ,   scrollInvert : false  // Enable invert style scrolling
+        ,   trackSize    : false  // Set the size of the scrollbar to auto or a fixed number.
+        ,   thumbSize    : false  // Set the size of the thumb to auto or a fixed number
         }
     ;
 
@@ -42,10 +43,12 @@
         ,   $track      = $scrollbar.find(".track")
         ,   $thumb      = $scrollbar.find(".thumb")
 
-        ,   mousePosition   = 0
+        ,   mousePosition  = 0
 
         ,   isHorizontal   = this.options.axis === 'x'
-        ,   hasTouchEvents = "ontouchstart" in document.documentElement
+        ,   hasTouchEvents = ("ontouchstart" in document.documentElement)
+        ,   wheelEvent     = ("onwheel" in document || document.documentMode >= 9) ? "wheel" :
+                             (document.onmousewheel !== undefined ? "mousewheel" : "DOMMouseScroll")
 
         ,   sizeLabel = isHorizontal ? "width" : "height"
         ,   posiLabel = isHorizontal ? "left" : "top"
@@ -77,24 +80,26 @@
             this.trackSize    = this.options.trackSize || this.viewportSize;
             this.thumbSize    = Math.min(this.trackSize, Math.max(0, (this.options.thumbSize || (this.trackSize * this.contentRatio))));
             this.trackRatio   = this.options.thumbSize ? (this.contentSize - this.viewportSize) / (this.trackSize - this.thumbSize) : (this.contentSize / this.trackSize);
+            mousePosition     = $track.offset().top;
 
             $scrollbar.toggleClass("disable", this.contentRatio >= 1);
-
             switch (scrollTo)
             {
                 case "bottom":
                     this.contentPosition = this.contentSize - this.viewportSize;
                     break;
 
                 case "relative":
-                    this.contentPosition = Math.min(this.contentSize - this.viewportSize, Math.max(0, this.contentPosition));
+                    this.contentPosition = Math.min(Math.max(this.contentSize - this.viewportSize, 0), Math.max(0, this.contentPosition));
                     break;
 
                 default:
                     this.contentPosition = parseInt(scrollTo, 10) || 0;
             }
 
             setSize();
+
+            return self;
         };
 
         function setSize()
@@ -114,8 +119,9 @@
                 {
                     if(1 === event.touches.length)
                     {
-                        start(event.touches[0]);
                         event.stopPropagation();
+
+                        start(event.touches[0]);
                     }
                 };
             }
@@ -125,10 +131,14 @@
                 $track.bind("mousedown", drag);
             }
 
+            $(window).resize(function()
+            {
+                self.update("relative");
+            });
+
             if(self.options.wheel && window.addEventListener)
             {
-                $container[0].addEventListener("DOMMouseScroll", wheel, false );
-                $container[0].addEventListener("mousewheel", wheel, false );
+                $container[0].addEventListener(wheelEvent, wheel, false );
             }
             else if(self.options.wheel)
             {
@@ -164,8 +174,9 @@
         {
             if(self.contentRatio < 1)
             {
-                var eventObject     = event || window.event
-                ,   wheelSpeedDelta = eventObject.wheelDelta ? eventObject.wheelDelta / 120 : -eventObject.detail / 3
+                var evntObj         = event || window.event
+                ,   deltaDir        = "delta" + self.options.axis.toUpperCase()
+                ,   wheelSpeedDelta = -(evntObj[deltaDir] || evntObj.detail || (-1 / 3 * evntObj.wheelDelta)) / 40
                 ;
 
                 self.contentPosition -= wheelSpeedDelta * self.options.wheelSpeed;
@@ -178,8 +189,8 @@
 
                 if(self.options.wheelLock || (self.contentPosition !== (self.contentSize - self.viewportSize) && self.contentPosition !== 0))
                 {
-                    eventObject = $.event.fix(eventObject);
-                    eventObject.preventDefault();
+                    evntObj = $.event.fix(evntObj);
+                    evntObj.preventDefault();
                 }
             }
         }
@@ -229,4 +240,4 @@
             }
         });
     };
-}));
+}));

infinite/tinyscrollbar.css

@@ -0,0 +1,10 @@
+/* Tiny Scrollbar */
+#scrollbar1 { width: 520px; margin: 20px 0 10px; }
+#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
+#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
+#scrollbar1 .scrollbar{ background: transparent url(images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
+#scrollbar1 .track { background: transparent url(images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
+#scrollbar1 .thumb { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
+#scrollbar1 .thumb .end { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
+#scrollbar1 .disable { display: none; }
+.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }