0.6.17

Don't try to get the class attribute if function is not available

README.md

@@ -106,23 +106,27 @@ You can fork the following JSFiddles for testing and experimenting purposes:
 * [Perfect Scrollbar](https://jsfiddle.net/DanielApt/xv0rrxv3/)
 * [Perfect Scrollbar (jQuery)](https://jsfiddle.net/DanielApt/gbfLazpx/)
 
-## Requirements
-
-To make this plugin *perfect*, some requirements were unavoidable.
-But, they're all very trivial and there is nothing to worry about.
+## Before using perfect-scrollbar
 
 The following requirements should meet.
 
 * the container must have a 'position' css style.
+* the container must be a normal container element.
+  * PS may not work well in `body`, `textarea`, `iframe` or flexbox.
 
 The following requirements are included in the basic CSS, but please
 keep in mind when you'd like to change the CSS files.
 
-* the container must have an 'overflow:hidden' css style.
+* the container must have an 'overflow: hidden' 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.
 
+Please keep in mind that perfect-scrollbar won't completely emulate native
+scrolls. Scroll hooking is generally considered as bad practice, and
+perfect-scrollbar should be used with care. Unless custom scroll is really needed,
+please consider using native scrolls.
+
 ## How to use
 
 First of all, please check if the container element meets the
@@ -284,52 +288,56 @@ imgLoader.perfectScrollbar();
 perfect-scrollbar supports optional parameters.
 
 ### handlers
-It is a list of handlers to use to scroll the element.  
-**Default**: `['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch']`  
+It is a list of handlers to use to scroll the element.
+**Default**: `['click-rail', 'drag-scrollbar', 'keyboard', 'wheel', 'touch']`
 **Disabled by default**: `'selection'`
 
 ### wheelSpeed
-The scroll speed applied to mousewheel event.  
+The scroll speed applied to mousewheel event.
 **Default**: `1`
 
 ### wheelPropagation
-If this option is true, when the scroll reaches the end of the side, mousewheel event will be propagated to parent element.  
+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.  
+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.  
+When set to an integer value, the thumb part of the scrollbar will not shrink below that number of pixels.
 **Default**: `null`
 
 ### maxScrollbarLength
-When set to an integer value, the thumb part of the scrollbar will not expand over that number of pixels.  
+When set to an integer value, the thumb part of the scrollbar will not expand over that number of pixels.
 **Default**: `null`
 
 ### useBothWheelAxes
-When set to true, and only one (vertical or horizontal) scrollbar is visible then both vertical and horizontal scrolling will affect the scrollbar.  
+When set to true, and only one (vertical or horizontal) scrollbar is visible then both vertical and horizontal scrolling will affect the scrollbar.
 **Default**: `false`
 
 ### suppressScrollX
-When set to true, the scroll bar in X axis will not be available, regardless of the content width.  
+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.  
+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.  
+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.  
+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`
 
+### autoupdate
+When set to true, the scroll will be updated when an element is added or removed from the content.
+**Default**: `true`
+
 ### theme
-A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map.  
+A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map.
 **Default**: `'default'`
 
 **Example 1:**
@@ -392,6 +400,9 @@ This event fires when scrolling reaches the start of the x-axis.
 ### ps-x-reach-end
 This event fires when scrolling reaches the end of the x-axis.
 
+### ps-dom-change
+This event fires when dom elements have been added to or removed from the content.
+
 You can listen to these events either with vanilla JavaScript
 ```javascript
 document.addEventListener('ps-scroll-x', function () {
@@ -409,7 +420,7 @@ $(document).on('ps-scroll-x', function () {
 
 ### Scrolling children inside perfect-scrollbar
 
-You can natively scroll children inside `perfect-scrollbar` with the mouse-wheel. Scrolling automatically works if 
+You can natively scroll children inside `perfect-scrollbar` with the mouse-wheel. Scrolling automatically works if
 the child is a `textarea`. All other elements need to have the `ps-child` class. This is demonstrated in [`/examples/children-native-scroll.html`](examples/children-native-scroll.html)
 
 ## IE Support

examples/options-autoupdate.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>perfect-scrollbar example</title>
+    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
+    <script src="../dist/js/perfect-scrollbar.js"></script>
+    <style>
+      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 80%; height: 400px; overflow: auto; }
+      .always-visible.contentHolder .content { background-image: url('./azusa.jpg'); width: 680px; height: 320px; }
+      .spacer { text-align:center }
+
+      .always-visible.ps-container > .ps-scrollbar-x-rail,
+      .always-visible.ps-container > .ps-scrollbar-y-rail {
+        opacity: 0.6;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="Default" class="contentHolder always-visible">
+      <div id="Content" class="content">
+      </div>
+    </div>
+    <p style='text-align: center'>
+      <button onclick='addContent()'>Add new content!</button>
+      <button onclick='removeContent()'>Remove content!</button>
+    </p>
+    <script>
+      var i = 1;
+      var $ = document.querySelector.bind(document);
+      window.onload = function () {
+        Ps.initialize($('#Default'), {
+          autoupdate: true
+        });
+      };
+
+      var addContent = function () {
+        var newDiv = document.createElement('div');
+        newDiv.id = 'node' + i++;
+        var newContent = document.createTextNode('Hi there!');
+        newDiv.appendChild(newContent);
+
+        $('#Default').insertBefore(newDiv, $('#Content'));
+      };
+
+      var removeContent = function () {
+        if (i <= 1) return;
+
+        var node = $('#node' + --i);
+        node.parentNode.removeChild(node);
+      };
+    </script>
+  </body>
+</html>
+

package.json

@@ -1,11 +1,11 @@
 {
   "name": "perfect-scrollbar",
-  "version": "0.6.14",
+  "version": "0.6.17",
   "description": "Minimalistic but perfect custom scrollbar plugin",
-  "author": "Hyunje Alex Jun <me@noraesae.net>",
+  "author": "Hyunje Jun <me@noraesae.net>",
   "contributors": [
     {
-      "name": "Hyunje Alex Jun",
+      "name": "Hyunje Jun",
       "email": "me@noraesae.net"
     }
   ],
@@ -51,15 +51,17 @@
   },
   "jspm": {
     "main": "./index.js",
-    "dependencies": {
-      "jquery": "npm:jquery"
-    }
+    "registry": "jspm"
   },
   "typings": "perfect-scrollbar.d.ts",
   "scripts": {
     "test": "gulp",
     "before-deploy": "gulp && gulp compress",
-    "release": "rm -rf dist && gulp && npm publish"
+    "release": "rm -rf dist && gulp && npm publish",
+    "bump": "npm version patch",
+    "bump:major": "npm version major",
+    "bump:minor": "npm version minor",
+    "postversion": "git push origin master --follow-tags"
   },
   "license": "MIT"
 }

perfect-scrollbar.d.ts

@@ -13,9 +13,9 @@ interface PerfectScrollbarOptions {
 }
 
 interface PerfectScrollbar {
-  initialize(container: HTMLElement, options?: PerfectScrollbarOptions);
-  update(container: HTMLElement);
-  destroy(container: HTMLElement);
+  initialize(container: HTMLElement, options?: PerfectScrollbarOptions): void;
+  update(container: HTMLElement): void;
+  destroy(container: HTMLElement): void;
 }
 
 interface JQuery {

src/js/lib/dom.js

@@ -14,7 +14,10 @@ DOM.appendTo = function (child, parent) {
 };
 
 function cssGet(element, styleName) {
-  return window.getComputedStyle(element)[styleName];
+  var style = window.getComputedStyle(element);
+  return style
+    ? style[styleName]
+    : null;
 }
 
 function cssSet(element, styleName, styleValue) {

src/js/lib/helper.js

@@ -10,7 +10,7 @@ var toInt = exports.toInt = function (x) {
 var clone = exports.clone = function (obj) {
   if (!obj) {
     return null;
-  } else if (obj.constructor === Array) {
+  } else if (Array.isArray(obj)) {
     return obj.map(clone);
   } else if (typeof obj === 'object') {
     var result = {};
@@ -23,6 +23,26 @@ var clone = exports.clone = function (obj) {
   }
 };
 
+exports.debounce = function (func, wait, immediate) {
+  var timeout;
+  return function () {
+    var context = this;
+    var args = arguments;
+    var later = function () {
+      timeout = null;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+};
+
 exports.extend = function (original, source) {
   var result = clone(original);
   for (var key in source) {

src/js/plugin/autoupdate.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var update = require('./update');
+var MutationObserver = window.MutationObserver;
+var instances = require('./instances');
+
+var createDOMEvent = function (name) {
+  var event = document.createEvent('Event');
+  event.initEvent(name, true, true);
+  return event;
+};
+
+module.exports = function (element) {
+  if (MutationObserver === null || MutationObserver === undefined) {
+    // MutationObserver is not supported
+    return;
+  }
+
+  var i = instances.get(element);
+  var onMutationObserver = function () {
+    update(element);
+    element.dispatchEvent(createDOMEvent('ps-dom-change'));
+  };
+
+  i.observer = new MutationObserver(onMutationObserver);
+  onMutationObserver();
+
+  var config = { childList: true, subtree: true };
+  i.observer.observe(element, config);
+};

src/js/plugin/default-setting.js

@@ -12,5 +12,6 @@ module.exports = {
   useBothWheelAxes: false,
   wheelPropagation: false,
   wheelSpeed: 1,
-  theme: 'default'
+  theme: 'default',
+  autoupdate: true
 };

src/js/plugin/destroy.js

@@ -11,6 +11,10 @@ module.exports = function (element) {
     return;
   }
 
+  if (i.observer) {
+    i.observer.disconnect();
+  }
+
   i.event.unbindAll();
   dom.remove(i.scrollbarX);
   dom.remove(i.scrollbarY);

src/js/plugin/handler/touch.js

@@ -88,32 +88,37 @@ function bindTouchHandler(element, i, supportsTouch, supportsIePointer) {
     }
   }
   function touchMove(e) {
-    if (!inLocalTouch && i.settings.swipePropagation) {
-      touchStart(e);
-    }
-    if (!inGlobalTouch && inLocalTouch && shouldHandle(e)) {
-      var touch = getTouch(e);
+    var target = e.target;
+    var className = target && target.getAttribute && target.getAttribute('class') || '';
 
-      var currentOffset = {pageX: touch.pageX, pageY: touch.pageY};
-
-      var differenceX = currentOffset.pageX - startOffset.pageX;
-      var differenceY = currentOffset.pageY - startOffset.pageY;
-
-      applyTouchMove(differenceX, differenceY);
-      startOffset = currentOffset;
-
-      var currentTime = (new Date()).getTime();
-
-      var timeGap = currentTime - startTime;
-      if (timeGap > 0) {
-        speed.x = differenceX / timeGap;
-        speed.y = differenceY / timeGap;
-        startTime = currentTime;
+    if (!className.match(/ps-prevent-touchmove/)) {
+      if (!inLocalTouch && i.settings.swipePropagation) {
+        touchStart(e);
       }
+      if (!inGlobalTouch && inLocalTouch && shouldHandle(e)) {
+        var touch = getTouch(e);
 
-      if (shouldPreventDefault(differenceX, differenceY)) {
-        e.stopPropagation();
-        e.preventDefault();
+        var currentOffset = {pageX: touch.pageX, pageY: touch.pageY};
+
+        var differenceX = currentOffset.pageX - startOffset.pageX;
+        var differenceY = currentOffset.pageY - startOffset.pageY;
+
+        applyTouchMove(differenceX, differenceY);
+        startOffset = currentOffset;
+
+        var currentTime = (new Date()).getTime();
+
+        var timeGap = currentTime - startTime;
+        if (timeGap > 0) {
+          speed.x = differenceX / timeGap;
+          speed.y = differenceY / timeGap;
+          startTime = currentTime;
+        }
+
+        if (shouldPreventDefault(differenceX, differenceY)) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
       }
     }
   }
@@ -152,9 +157,7 @@ function bindTouchHandler(element, i, supportsTouch, supportsIePointer) {
     i.event.bind(element, 'touchstart', touchStart);
     i.event.bind(element, 'touchmove', touchMove);
     i.event.bind(element, 'touchend', touchEnd);
-  }
-
-  if (supportsIePointer) {
+  } else if (supportsIePointer) {
     if (window.PointerEvent) {
       i.event.bind(window, 'pointerdown', globalTouchStart);
       i.event.bind(window, 'pointerup', globalTouchEnd);

src/js/plugin/initialize.js

@@ -4,6 +4,8 @@ var _ = require('../lib/helper');
 var cls = require('../lib/class');
 var instances = require('./instances');
 var updateGeometry = require('./update-geometry');
+var autoupdate = require('./autoupdate');
+var resizer = require('./resizer');
 
 // Handlers
 var handlers = {
@@ -34,4 +36,9 @@ module.exports = function (element, userSettings) {
   nativeScrollHandler(element);
 
   updateGeometry(element);
+
+  if (i.settings.autoupdate) {
+    autoupdate(element);
+    resizer(element);
+  }
 };

src/js/plugin/resizer.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var update = require('./update');
+var instances = require('./instances');
+var _ = require('../lib/helper');
+
+module.exports = function (element) {
+  var i = instances.get(element);
+
+  var onResize = function () {
+    update(element);
+  };
+
+  i.event.bind(window, 'resize', _.debounce(onResize, 60));
+};