Added ability to tur off custom scrollbars with saving the API;

Some optimisations;

Author: xobotyi

dist/index.js

@@ -60,6 +60,7 @@ function LoopControllerClass() {
     isActive = true;
     animationFrameId && cancelAnimationFrame(animationFrameId);
     requestAnimationFrame(animationFrameCallback);
+    return _this;
   };
   /**
    * Stop the loop if it is active
@@ -75,6 +76,7 @@ function LoopControllerClass() {
     isActive = false;
     animationFrameId && cancelAnimationFrame(animationFrameId);
     animationFrameId = null;
+    return _this;
   };
   /**
    * Return the array pf registered scrollbars

dist/util/LoopController.js

@@ -22,14 +22,14 @@ var scrollbarWidth = null;
  */
 
 function getScrollbarWidth() {
-  if (!isset(document)) {
-    return 0;
-  }
-
   if (scrollbarWidth !== null) {
     return scrollbarWidth;
   }
 
+  if (!isset(document)) {
+    return scrollbarWidth = 0;
+  }
+
   var el = document.createElement("div");
   el.setAttribute("style", "display:block;position:absolute;width:100px;height:100px;top:-9999px;overflow:scroll;");
   document.body.appendChild(el);

dist/util/utilities.js

@@ -22,12 +22,15 @@ export default class SandboxBlock extends React.Component {
         this.handleScrollLeftClick = this.handleScrollLeftClick.bind(this);
         this.handleScrollRightClick = this.handleScrollRightClick.bind(this);
         this.toggleRtl = this.toggleRtl.bind(this);
+        this.toggleNativeScrollbarClick = this.toggleNativeScrollbarClick.bind(this);
 
         this.state = {
             noScroll: false,
             noScrollY: false,
             noScrollX: false,
 
+            nativeScrollbar: false,
+
             rtl: false,
 
             permanentTracks: false,
@@ -43,7 +46,6 @@ export default class SandboxBlock extends React.Component {
 
     toggleNoScroll() {
         this.setState({
-            ...this.state,
             noScroll: !this.state.noScroll,
             noScrollY: !this.state.noScroll,
             noScrollX: !this.state.noScroll,
@@ -52,7 +54,6 @@ export default class SandboxBlock extends React.Component {
 
     toggleNoScrollY() {
         this.setState({
-            ...this.state,
             noScroll: (this.state.noScroll ? true : this.state.noScrollX) && !this.state.noScrollY,
             noScrollY: !this.state.noScrollY,
             noScrollX: this.state.noScroll ? true : this.state.noScrollX,
@@ -61,7 +62,6 @@ export default class SandboxBlock extends React.Component {
 
     toggleNoScrollX() {
         this.setState({
-            ...this.state,
             noScroll: !this.state.noScrollX && (this.state.noScroll ? true : this.state.noScrollY),
             noScrollX: !this.state.noScrollX,
             noScrollY: this.state.noScroll ? true : this.state.noScrollY,
@@ -70,7 +70,6 @@ export default class SandboxBlock extends React.Component {
 
     togglePermanentTracks() {
         this.setState({
-            ...this.state,
             permanentTracks: !this.state.permanentTracks,
             permanentTrackY: !this.state.permanentTracks,
             permanentTrackX: !this.state.permanentTracks,
@@ -79,7 +78,6 @@ export default class SandboxBlock extends React.Component {
 
     togglePermanentTrackY() {
         this.setState({
-            ...this.state,
             permanentTracks:
                 (this.state.permanentTracks ? true : this.state.permanentTrackX) && !this.state.permanentTrackY,
             permanentTrackY: !this.state.permanentTrackY,
@@ -89,7 +87,6 @@ export default class SandboxBlock extends React.Component {
 
     togglePermanentTrackX() {
         this.setState({
-            ...this.state,
             permanentTracks:
                 !this.state.permanentTrackX && (this.state.permanentTracks ? true : this.state.permanentTrackY),
             permanentTrackX: !this.state.permanentTrackX,
@@ -99,21 +96,24 @@ export default class SandboxBlock extends React.Component {
 
     toggleRtl() {
         this.setState({
-            ...this.state,
             rtl: !this.state.rtl,
         });
     }
 
+    toggleNativeScrollbarClick() {
+        this.setState({
+            nativeScrollbar: !this.state.nativeScrollbar,
+        });
+    }
+
     handleAddParagraphClick() {
         this.setState({
-            ...this.state,
             paragraphsCount: this.state.paragraphsCount + 1,
         });
     }
 
     handleRemoveParagraphClick() {
         this.setState({
-            ...this.state,
             paragraphsCount: Math.max(0, this.state.paragraphsCount - 1),
         });
     }
@@ -140,12 +140,25 @@ export default class SandboxBlock extends React.Component {
     }
 
     render() {
-        const {noScroll, noScrollY, noScrollX, permanentTracks, permanentTrackY, permanentTrackX, rtl} = this.state;
+        const {
+            noScroll,
+            noScrollY,
+            noScrollX,
+            permanentTracks,
+            permanentTrackY,
+            permanentTrackX,
+            rtl,
+            nativeScrollbar,
+        } = this.state;
 
         return (
             <div className="block" id="SandboxBlock">
                 <div className="title">Sandbox</div>
                 <div className="description">
+                    <div className="button" key="nativeScrollbar" onClick={this.toggleNativeScrollbarClick}>
+                        {nativeScrollbar ? "Custom scrollbars" : "Native scrollbars"}
+                    </div>
+                    <br />
                     <div className="button" key="noScroll" onClick={this.toggleNoScroll}>
                         {noScroll ? "Enable scroll" : "Disable scroll"}
                     </div>
@@ -196,6 +209,7 @@ export default class SandboxBlock extends React.Component {
                 </div>
                 <div className="content" style={{height: 280}}>
                     <Scrollbar
+                        nativeScrollbars={nativeScrollbar}
                         defaultStyles={false}
                         ref={ref => {
                             this.scrollbar = ref;

examples/app/components/blocks/SandboxBlock.js

@@ -378,7 +378,7 @@ body {
                 width:      8px;
                 background: rgba(0, 0, 0, 0.1);
                 grid-area:  1 / 2 / auto / auto;
-                overflow:      hidden;
+                overflow:   hidden;
 
                 & > .ScrollbarsCustom-thumb {
                     cursor:     pointer;
@@ -427,7 +427,14 @@ body {
 
     & > .content {
         margin: 2rem 0 0;
-        & > .ScrollbarsCustom-holder {
+        & > .ScrollbarsCustom-holder.ScrollbarsCustom-native {
+            p {
+                display:  inline-block;
+                position: relative;
+                width:    150%;
+            }
+        }
+        & > .ScrollbarsCustom-holder:not(.ScrollbarsCustom-native) {
             display:               grid;
             width:                 100%;
             height:                100%;
@@ -452,7 +459,7 @@ body {
                 width:      8px;
                 background: rgba(0, 0, 0, 0.1);
                 grid-area:  1 / 2 / auto / auto;
-                overflow:      hidden;
+                overflow:   hidden;
 
                 & > .ScrollbarsCustom-thumb {
                     cursor:     pointer;

examples/app/style.scss

@@ -69,7 +69,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run format && git add .",
+      "pre-commit": "npm run build && npm run format && git add .",
       "post-commit": "git update-index -g"
     }
   },