Working on documentation, colorization and scroll detection

Author: Harmen

README.md

@@ -1,12 +1,23 @@
 # Scrollert.js - a cross browser, OSX-like, light weight scrollbar
-[Scrollert.js](https://syslogicnl.github.io/scrollert/) is a jQuery plugin that implements **good-looking and uniform scrollbars** on all browsers, platforms and devices. It has a small memory and DOM footprint in the browser and is fully customizable through CSS. It creates both **horizontal** and **vertical** scrollbars. 
+Scrollert is a jQuery plugin that implements good-looking and uniform scrollbars on all browsers, platforms and devices. It has a small memory and DOM footprint in the browser and is fully customizable through CSS. It creates both horizontal and vertical scrollbars. 
 
 Scrollert.js can be loaded as a [UMD module](https://github.com/umdjs/umd) with your Module loader of choice (SystemJS, RequireJS, Webpack etc) or by loading it globally with a `<script>` tag.
 
 Scrollert.js is written in Typescript and LESS.
 
 Checkout our [website](https://syslogicnl.github.io/scrollert/) and the [Github repository](https://github.com/SyslogicNL/scrollert)!
 
+# Table of contents
+- [Support and compatibility](#support-and-compatibility)
+- [Basic usage](#basic-usage)
+- [Advanced usage](#advanced-usage)
+ - [Default styling](#default-styling)
+ - [Custom styling](#custom-styling)
+ - [Options](#options)
+ - [Methods](#methods)
+ - [What if my content or container resizes?](#what-if-my-content-or-container-resizes-)
+- [FAQ](#faq)
+
 # Support and compatibility
 Scrollert.js is thoroughly field tested and is compatible with:
 - *Chrome* (Windows, OSX, Linux)
@@ -61,7 +72,7 @@ Specify to which axis or axes Scrollert.js must listen. Gives horizontal and/or
 
 **Default:** `['x', 'y']`
 
-### preventOuterScroll
+### preventOuterScroll (experimental)
 Prevents scrolling of parent elements while hovering a scrollert pane.
 
 **Type:** boolean
@@ -79,7 +90,6 @@ The prefix which is prepended to all css-classes.
 ### eventNamespace
 The namespace in which all events are added. There is not really a use case to override this, but it is still possible though.
 
-
 **Type:** string
 
 **Default:** `scrollert`
@@ -106,19 +116,29 @@ To destroy a Scrollert.js instance and revert all changes back to how it was bef
 jQuery('.scrollert').scrollert('destroy');
 ```
 
-## Events
-Not implemented yet.
+## What if my content or container resizes?
+It could be the case that your inner content or outer container resizes, due to things such as new content, a toggled view state or a window resize. Both inner and outer events can affect the size of the scrollbar. To detect changes in the content of a Scrollert-pane, you could use libraries such as:
+ - https://github.com/sdecima/javascript-detect-element-resize
+ - http://marcj.github.io/css-element-queries/
+
+You could fire the update method on Scrollert.js to update the scrollbar according to the changed reality.
+```javascript
+addResizeListener($('#content-inner'), function() {
+    jQuery('.scrollert').scrollert('update');
+});
+```
+
 
 # FAQ
 <sup>frequently asked and less frequently asked, but still answered:</sup>
 ## How do I customize Scrollert.js?
 You can customize the looks of Scrollert.js by styling it using CSS.
 
 ## Why must I specify a tabindex on the content element?
-Good question. I forgot while developing. There really is a reason for that. When it comes to mind, I will update this question
+Specifying a tabindex allows the end-user to use it's keyboard arrow keys to navigate while the pane is focussed.
 
 ## Why is this plugin created? There are already so many javascript scrollbar plugins
-Syslogic is the maker of Scienta. The majority of our customers uses Windows. There was only one problem. Although we like windows, we are not quite fond of the default Windows scrollbar, especially not when used in an inline panel. To provide our customers with a beautiful and uniform scrolling experience, we searched for a scrollbar solution. We couldn't find one that suited our needs. So we decided to build one ourselfs.
+Syslogic is the maker of Scienta. We want to give our customers the best scrolling experience. The majority of our customers uses Windows. There was only one problem. Although we like windows, we are not quite fond of the default Windows scrollbar, especially not when used in an inline panel. To provide our customers with a beautiful and uniform scrolling experience, we searched for a scrollbar solution. We couldn't find one that suited our needs. So we decided to build one ourselfs.
 
  # Build it yourself
  You don't have to stick to the shipped build. Why not build it yourself? You can run `npm install` and `gulp build` to create a customized build.

build/docs/layouts/parts/features/both.jade

@@ -1,6 +1,6 @@
 div(class=" mdl-card mdl-shadow--2dp")
     div(class="mdl-card__title mdl-color--primary mdl-color-text--white mdl-card--expand" style="height: 400px; padding:0;" )
-        div(class="scrollert" style="width: 100%; height: 100%")
+        div(class="scrollert scrollert-white" style="width: 100%; height: 100%")
             div(class='scrollert-content' tabindex='1')
                 div(style="width:200%; height: 100%;")
                     h2(style="width:50%; float:left; line-height: 400px;") Scrolling

build/docs/layouts/parts/features/horizontal.jade

@@ -1,6 +1,6 @@
 div(class=" mdl-card mdl-shadow--2dp" style="margin-top: 18px; ")
     div(class="mdl-card__title mdl-color--primary mdl-color-text--white mdl-card--expand" style="height: 200px; padding:0;" )
-        div(class="scrollert" style="width: 100%; height: 100%")
+        div(class="scrollert scrollert-white" style="width: 100%; height: 100%")
             div(class='scrollert-content' tabindex='1')
                 div(style="width:200%")
                     h2(style="width:50%; float:left; height: 200px; line-height:200px;") Horizontal

build/docs/layouts/parts/features/vertical.jade

@@ -1,6 +1,6 @@
 div(class=" mdl-card mdl-shadow--2dp")
     div(class="mdl-card__title mdl-color--primary mdl-color-text--white mdl-card--expand" style="height: 618px; padding:0;" )
-        div(class="scrollert" style="width: 100%; height: 100%")
+        div(class="scrollert scrollert-white" style="width: 100%; height: 100%")
             div(class='scrollert-content' tabindex='1')
                 h2(style="line-height: 618px;") Vertical
                 h2(style="line-height: 618px;") Vertical

build/docs/layouts/parts/header.jade

@@ -1,4 +1,4 @@
-div(class="mdl-card__title scrollert header")
+div(class="mdl-card__title scrollert scrollert-white header")
         div(class="scrollert-content")
             div(style="width: 200%;")
                 h1(style="font-size: 160px; font-weight: bold; color: #fff; letter-spacing: 0.01em; width: 50%; float: left; padding-left: 2rem; box-sizing: border-box; padding-top: .1em;")
@@ -17,8 +17,6 @@ div(class="mdl-card__actions mdl-card--border")
         | Features
     a(class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="#documentation")
         | Documentation
-    a(class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="#demos")
-        | Demos
     a(class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="https://github.com/SyslogicNL/scrollert")
         | View on Github