version 1.5.0

README.md

@@ -20,6 +20,7 @@ I've created this plugin because I hate ugly and space consuming scrollbars. Sim
  - Textarea and Body support.
  - Direction RTL support. (with normalization)
  - Simple and effective scrollbar-styling.
+ - Sophisticated extension system.
  
 ## Demo & Documentation
 
@@ -37,6 +38,9 @@ It was tested with the jQuery versions: 1.9.1, 2.x, 3.x, and it won't work with
 #### manually
 Download OverlayScrollbars manually from [Releases](https://github.com/KingSora/OverlayScrollbars/releases).
 
+#### cdn
+You can also use OverlayScrollbars via a [cdn](https://cdnjs.com/libraries/overlayscrollbars).
+
 #### npm
 OverlayScrollbars can be also downloaded from [npm](https://www.npmjs.com/package/overlayscrollbars).
 
@@ -76,10 +80,10 @@ Initialize the plugin after your document has been fully loaded.
 
 Default initialization:
 ```js
-$(function() {
+document.addEventListener("DOMContentLoaded", function() {
-	//The first argument are the elements to which the plugin shall be initialized
+        //The first argument are the elements to which the plugin shall be initialized
-	//The second argument has to be at least a empty object or a object with your desired options
+        //The second argument has to be at least a empty object or a object with your desired options
-	OverlayScrollbars(document.querySelectorAll('body'), { });
+        OverlayScrollbars(document.querySelectorAll('body'), { });
 });
 ```
 
@@ -488,6 +492,45 @@ var pluginState = instance.getState();</pre>
 instance.destroy();</pre>
 		</td>
 	</tr>
+	<tr>
+		<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-ext" target="_blank">.ext()</a></b></td>
+		<td>Returns the instance of a certain extension of the current plugin instance.</td>
+	</tr>
+	<tr>
+		<td colspan="2">
+			example(s):<br> 
+			<pre lang="js">
+//get the instance of the extension "myExtension"
+var extensionInstance = instance.ext("myExtension");</pre>
+		</td>
+	</tr>
+	<tr>
+		<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-addext" target="_blank">.addExt()</a></b></td>
+		<td>Adds a extension to the current instance.</td>
+	</tr>
+	<tr>
+		<td colspan="2">
+			example(s):<br> 
+			<pre lang="js">
+//add the registered extension "myExtension" to the plugin instance
+var extensionInstance = instance.addExt("myExtension");</pre>
+		</td>
+	</tr>
+	<tr>
+		<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/method-removeext" target="_blank">.removeExt()</a></b></td>
+		<td>Removes a extension from the current instance.</td>
+	</tr>
+	<tr>
+		<td colspan="2">
+			example(s):<br> 
+			<pre lang="js">
+//add the registered extension "myExtension" to the plugin instance
+instance.addExt("myExtension");
+
+//remove the added extension "myExtension" from the plugin instance
+instance.removeExt("myExtension");</pre>
+		</td>
+	</tr>
 </table>
 
 #### Global methods:
@@ -528,6 +571,24 @@ OverlayScrollbars.defaultOptions({
 var globals = OverlayScrollbars.globals();</pre>
 		</td>
 	</tr>
+	<tr>
+		<td><b><a href="https://kingsora.github.io/OverlayScrollbars/#!documentation/gmethod-extension" target="_blank">OverlayScrollbars.extension()</a></b></td>
+		<td>Registers, Unregisters or returns extensions.</td>
+	</tr>
+	<tr>
+		<td colspan="2">
+			example(s):<br> 
+			<pre lang="js">
+//register a dummy extension with the name "myExtension"
+OverlayScrollbars.extension("myExtension", function() { return { }; });
+//unregister the extension with the name "myExtension"
+OverlayScrollbars.extension("myExtension", null);
+//get the extension-object with the name "myExtension"
+var registeredExtension = OverlayScrollbars.extension("myExtension");
+//get all registered extension-objects
+var extensionObjects = OverlayScrollbars.extension();</pre>
+		</td>
+	</tr>
 </table>
 
 ## Future Plans

css/OverlayScrollbars.css

@@ -2,13 +2,13 @@
  * OverlayScrollbars
  * https://github.com/KingSora/OverlayScrollbars
  *
- * Version: 1.4.5
+ * Version: 1.5.0
  *
  * Copyright KingSora.
  * https://github.com/KingSora
  *
  * Released under the MIT license.
- * Date: 18.05.2018
+ * Date: 21.06.2018
  */
 
 /*
@@ -38,6 +38,18 @@ body.os-dragging * {
 .os-host-textarea {
     position: relative;
     overflow: visible !important;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: flex-start;
+}
+.os-host-flexbox {
+    overflow: hidden !important;
+    display: flex;
+}
+.os-host-flexbox > .os-padding > .os-viewport > .os-content {
+    display: flex;
 }
 #hs-dummy-scrollbar-size {
     position: fixed;
@@ -117,9 +129,6 @@ body.os-dragging * {
     width: 100%;
     visibility: visible;
 }
-.os-host-textarea > .os-padding > .os-content {
-    overflow: hidden !important;
-}
 .os-content > .os-textarea {
     direction: inherit !important;
     float: none !important;
@@ -215,12 +224,14 @@ object.os-resize-observer {
     position: relative;
     float: left;
     max-height: 1px;
-    margin-top: -1px;
     overflow: hidden;
     z-index: -1;
     padding: 0;
     margin: 0;
     pointer-events: none;
+    flex-grow: inherit;
+    flex-shrink: 0;
+    flex-basis: 0;
 }
 .os-size-auto-observer > .os-resize-observer {
     width: 1000%;
@@ -362,7 +373,8 @@ html.os-html > .os-host > .os-scrollbar {
     top: 0;
     bottom: 0;
 }
-.os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal {
+.os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal,
+.os-host-rtl.os-host-resize-disabled.os-host-scrollbar-vertical-hidden > .os-scrollbar-horizontal {
     right: 0;
     left: 0;
 }
@@ -467,29 +479,34 @@ THEMES:
 .os-theme-light > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle {
     min-height: 30px;
 }
-.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
-.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
-    border-radius: 11px;
-    opacity: .4;
-}
-.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
-    background: #000;
-}
-.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
-    background: #fff;
-}
 .os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
 .os-theme-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
-    -webkit-transition: opacity 0.3s;
+    -webkit-transition: background-color 0.3s;
-    transition: opacity 0.3s;
+    transition: background-color 0.3s;
+}
+.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
+.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle,
+.os-theme-dark > .os-scrollbar > .os-scrollbar-track,
+.os-theme-light > .os-scrollbar > .os-scrollbar-track {
+    border-radius: 10px;
+}
+.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
+    background: rgba(0, 0, 0, 0.4);
+}
+.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
+    background: rgba(255, 255, 255, 0.4);
+}
+.os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
+    background: rgba(0, 0, 0, .55);
 }
-.os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle,
 .os-theme-light > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
-    opacity: .55;
+    background: rgba(255, 255, 255, .55);
+}
+.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
+    background: rgba(0, 0, 0, .7);
 }
-.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active,
 .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active {
-    opacity: .7;
+    background: rgba(255, 255, 255, .7);
 }
 .os-theme-dark > .os-scrollbar-horizontal .os-scrollbar-handle:before,
 .os-theme-dark > .os-scrollbar-vertical .os-scrollbar-handle:before,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "overlayscrollbars",
-  "version": "1.4.5",
+  "version": "1.5.0",
   "description": "A javascript scrollbar plugin which hides the native scrollbars and provides custom styleable overlay scrollbars, but keeps the native functionality and feeling.",
   "keywords" : [
     "overlayscrollbars",