Default styles fix for RTL direction;

Author: xobotyi

dist/index.js

@@ -345,20 +345,25 @@ function (_React$Component) {
       !(0, _utilities.isset)(isRtl) && (isRtl = rtlAutodetect ? getComputedStyle(_this.content).direction === "rtl" : _this.isRtl || false);
 
       if (forced || _this.isRtl !== isRtl) {
-        _this.holder.classList.toggle("ScrollbarsCustom-RTL", isRtl);
-
         _this.isRtl = isRtl;
+
+        _this.holder.classList.toggle("ScrollbarsCustom-RTL", _this.isRtl);
       }
 
       if (forced) {
         var browserScrollbarWidth = (0, _utilities.getScrollbarWidth)(),
             fallbackScrollbarWidth = _this.props.fallbackScrollbarWidth;
 
         if (verticalScrollNotBlocked) {
-          _this.content.style.marginLeft = isRtl ? -(browserScrollbarWidth || fallbackScrollbarWidth) + "px" : null;
-          _this.content.style.paddingLeft = isRtl ? (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px" : null;
-          _this.content.style.marginRight = isRtl ? null : -(browserScrollbarWidth || fallbackScrollbarWidth) + "px";
-          _this.content.style.paddingRight = isRtl ? null : (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px";
+          _this.content.style.marginLeft = _this.isRtl ? -(browserScrollbarWidth || fallbackScrollbarWidth) + "px" : null;
+          _this.content.style.paddingLeft = _this.isRtl ? (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px" : null;
+          _this.content.style.marginRight = _this.isRtl ? null : -(browserScrollbarWidth || fallbackScrollbarWidth) + "px";
+          _this.content.style.paddingRight = _this.isRtl ? null : (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px";
+
+          if (_this.props.defaultStyles) {
+            _this.trackVertical.style.left = _this.isRtl ? 0 : null;
+            _this.trackVertical.style.right = _this.isRtl ? null : 0;
+          }
         } else {
           _this.content.style.marginLeft = _this.content.style.paddingLeft = _this.content.style.marginRight = _this.content.style.paddingRight = null;
         }
@@ -429,7 +434,7 @@ function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState, snapshot) {
-      if (prevProps.noScroll !== this.props.noScroll || prevProps.noScrollY !== this.props.noScrollY || prevProps.noScrollX !== this.props.noScrollX || prevProps.rtl !== this.props.rtl || prevProps.permanentScrollbars !== this.props.permanentScrollbars || prevProps.permanentScrollbarX !== this.props.permanentScrollbarX || prevProps.permanentScrollbarY !== this.props.permanentScrollbarY) {
+      if (prevProps.noScroll !== this.props.noScroll || prevProps.noScrollY !== this.props.noScrollY || prevProps.noScrollX !== this.props.noScrollX || prevProps.rtl !== this.props.rtl || prevProps.defaultStyles !== this.props.defaultStyles || prevProps.permanentScrollbars !== this.props.permanentScrollbars || prevProps.permanentScrollbarX !== this.props.permanentScrollbarX || prevProps.permanentScrollbarY !== this.props.permanentScrollbarY) {
         this.update(true, prevProps.rtl !== this.props.rtl);
       }
 

src/index.js

@@ -134,7 +134,8 @@ export default class Scrollbar extends React.Component
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
-        if (prevProps.noScroll !== this.props.noScroll || prevProps.noScrollY !== this.props.noScrollY || prevProps.noScrollX !== this.props.noScrollX || prevProps.rtl !== this.props.rtl
+        if (prevProps.noScroll !== this.props.noScroll || prevProps.noScrollY !== this.props.noScrollY || prevProps.noScrollX !== this.props.noScrollX
+            || prevProps.rtl !== this.props.rtl || prevProps.defaultStyles !== this.props.defaultStyles
             || prevProps.permanentScrollbars !== this.props.permanentScrollbars || prevProps.permanentScrollbarX !== this.props.permanentScrollbarX || prevProps.permanentScrollbarY !== this.props.permanentScrollbarY) {
             this.update(true, prevProps.rtl !== this.props.rtl);
         }
@@ -526,20 +527,25 @@ export default class Scrollbar extends React.Component
         !isset(isRtl) && (isRtl = rtlAutodetect ? getComputedStyle(this.content).direction === "rtl" : this.isRtl || false);
 
         if (forced || this.isRtl !== isRtl) {
-            this.holder.classList.toggle("ScrollbarsCustom-RTL", isRtl);
-
             this.isRtl = isRtl;
+            this.holder.classList.toggle("ScrollbarsCustom-RTL", this.isRtl);
+
         }
 
         if (forced) {
             const browserScrollbarWidth  = getScrollbarWidth(),
                   fallbackScrollbarWidth = this.props.fallbackScrollbarWidth;
 
             if (verticalScrollNotBlocked) {
-                this.content.style.marginLeft = isRtl ? -(browserScrollbarWidth || fallbackScrollbarWidth) + "px" : null;
-                this.content.style.paddingLeft = isRtl ? (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px" : null;
-                this.content.style.marginRight = isRtl ? null : -(browserScrollbarWidth || fallbackScrollbarWidth) + "px";
-                this.content.style.paddingRight = isRtl ? null : (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px";
+                this.content.style.marginLeft = this.isRtl ? -(browserScrollbarWidth || fallbackScrollbarWidth) + "px" : null;
+                this.content.style.paddingLeft = this.isRtl ? (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px" : null;
+                this.content.style.marginRight = this.isRtl ? null : -(browserScrollbarWidth || fallbackScrollbarWidth) + "px";
+                this.content.style.paddingRight = this.isRtl ? null : (browserScrollbarWidth ? null : fallbackScrollbarWidth) + "px";
+
+                if (this.props.defaultStyles) {
+                    this.trackVertical.style.left = this.isRtl ? 0 : null;
+                    this.trackVertical.style.right = this.isRtl ? null : 0;
+                }
             }
             else {
                 this.content.style.marginLeft =