Critical bug fixed (wrong classnames was assigned);

Added overflow: hidden; to tracks;

Author: xobotyi

dist/index.js

@@ -70,7 +70,8 @@ var defaultElementsStyles = {
     top: 0,
     margin: "8px 0",
     background: "rgba(0,0,0,.1)",
-    borderRadius: 4
+    borderRadius: 4,
+    overflow: "hidden"
   },
   trackHorizontal: {
     position: "absolute",
@@ -80,7 +81,8 @@ var defaultElementsStyles = {
     left: 0,
     margin: "0 8px",
     background: "rgba(0,0,0,.1)",
-    borderRadius: 4
+    borderRadius: 4,
+    overflow: "hidden"
   },
   thumbVertical: {
     cursor: "pointer",
@@ -578,13 +580,13 @@ function (_React$Component) {
           props = _objectWithoutProperties(_this$props2, ["minimalThumbsSize", "fallbackScrollbarWidth", "scrollDetectionThreshold", "defaultStyles", "noScroll", "noScrollX", "noScrollY", "permanentScrollbars", "permanentScrollbarX", "permanentScrollbarY", "rtl", "momentum", "tagName", "children", "style", "className", "wrapperStyle", "contentStyle", "trackVerticalStyle", "trackHorizontalStyle", "thumbVerticalStyle", "thumbHorizontalStyle", "wrapperClassName", "contentClassName", "trackVerticalClassName", "trackHorizontalClassName", "thumbVerticalClassName", "thumbHorizontalClassName", "onScroll", "onScrollStart", "onScrollStop", "renderWrapper", "renderContent", "renderTrackVertical", "renderTrackHorizontal", "renderThumbVertical", "renderThumbHorizontal"]);
 
       var browserScrollbarWidth = (0, _utilities.getScrollbarWidth)();
-      var holderClassNames = "ScrollbarsCustom-holder" + (className && " " + className),
-          wrapperClassNames = "ScrollbarsCustom-wrapper" + (wrapperClassName && " " + wrapperClassName),
-          contentClassNames = "ScrollbarsCustom-content" + (contentClassName && " " + contentClassName),
-          trackVerticalClassNames = "ScrollbarsCustom-track ScrollbarsCustom-trackVertical" + (trackVerticalClassName && " " + trackVerticalClassName),
-          trackHorizontalClassNames = "ScrollbarsCustom-track ScrollbarsCustom-trackHorizontal" + (trackHorizontalClassName && " " + trackHorizontalClassName),
-          thumbVerticalClassNames = "ScrollbarsCustom-thumb ScrollbarsCustom-thumbHorizontal" + (thumbVerticalClassName && " " + thumbVerticalClassName),
-          thumbHorizontalClassNames = "ScrollbarsCustom-thumb ScrollbarsCustom-thumbHorizontal" + (thumbHorizontalClassName && " " + thumbHorizontalClassName);
+      var holderClassNames = "ScrollbarsCustom-holder" + (!!className ? " " + className : ""),
+          wrapperClassNames = "ScrollbarsCustom-wrapper" + (!!wrapperClassName ? " " + wrapperClassName : ""),
+          contentClassNames = "ScrollbarsCustom-content" + (!!contentClassName ? " " + contentClassName : ""),
+          trackVerticalClassNames = "ScrollbarsCustom-track ScrollbarsCustom-trackVertical" + (!!trackVerticalClassName ? " " + trackVerticalClassName : ""),
+          trackHorizontalClassNames = "ScrollbarsCustom-track ScrollbarsCustom-trackHorizontal" + (!!trackHorizontalClassName ? " " + trackHorizontalClassName : ""),
+          thumbVerticalClassNames = "ScrollbarsCustom-thumb ScrollbarsCustom-thumbHorizontal" + (!!thumbVerticalClassName ? " " + thumbVerticalClassName : ""),
+          thumbHorizontalClassNames = "ScrollbarsCustom-thumb ScrollbarsCustom-thumbHorizontal" + (!!thumbHorizontalClassName ? " " + thumbHorizontalClassName : "");
 
       var holderStyles = _objectSpread({}, style, defaultStyles && defaultElementsStyles.holder, {
         direction: rtl === true && "rtl" || rtl === false && "ltr" || null

examples/app/style.scss

@@ -58,6 +58,7 @@ body {
             display:       block;
             background:    #D0D3D7;
             border-radius: 1rem;
+            overflow:      hidden;
 
             &.ScrollbarsCustom-trackVertical {
                 height: calc(100% - 2rem);
@@ -377,6 +378,7 @@ body {
                 width:      8px;
                 background: rgba(0, 0, 0, 0.1);
                 grid-area:  1 / 2 / auto / auto;
+                overflow:      hidden;
 
                 & > .ScrollbarsCustom-thumb {
                     cursor:     pointer;
@@ -450,6 +452,7 @@ body {
                 width:      8px;
                 background: rgba(0, 0, 0, 0.1);
                 grid-area:  1 / 2 / auto / auto;
+                overflow:      hidden;
 
                 & > .ScrollbarsCustom-thumb {
                     cursor:     pointer;

src/index.js

@@ -32,6 +32,7 @@ const defaultElementsStyles = {
         margin:       "8px 0",
         background:   "rgba(0,0,0,.1)",
         borderRadius: 4,
+        overflow:     "hidden",
     },
     trackHorizontal: {
         position:     "absolute",
@@ -42,6 +43,7 @@ const defaultElementsStyles = {
         margin:       "0 8px",
         background:   "rgba(0,0,0,.1)",
         borderRadius: 4,
+        overflow:     "hidden",
     },
     thumbVertical:   {
         cursor:       "pointer",
@@ -637,13 +639,13 @@ export default class Scrollbar extends React.Component
 
         const browserScrollbarWidth = getScrollbarWidth();
 
-        const holderClassNames          = "ScrollbarsCustom-holder" + (className && (" " + className)),
-              wrapperClassNames         = "ScrollbarsCustom-wrapper" + (wrapperClassName && (" " + wrapperClassName)),
-              contentClassNames         = "ScrollbarsCustom-content" + (contentClassName && (" " + contentClassName)),
-              trackVerticalClassNames   = "ScrollbarsCustom-track ScrollbarsCustom-trackVertical" + (trackVerticalClassName && (" " + trackVerticalClassName)),
-              trackHorizontalClassNames = "ScrollbarsCustom-track ScrollbarsCustom-trackHorizontal" + (trackHorizontalClassName && (" " + trackHorizontalClassName)),
-              thumbVerticalClassNames   = "ScrollbarsCustom-thumb ScrollbarsCustom-thumbHorizontal" + (thumbVerticalClassName && (" " + thumbVerticalClassName)),
-              thumbHorizontalClassNames = "ScrollbarsCustom-thumb ScrollbarsCustom-thumbHorizontal" + (thumbHorizontalClassName && (" " + thumbHorizontalClassName));
+        const holderClassNames          = "ScrollbarsCustom-holder" + (!!className ? (" " + className) : ""),
+              wrapperClassNames         = "ScrollbarsCustom-wrapper" + (!!wrapperClassName ? (" " + wrapperClassName) : ""),
+              contentClassNames         = "ScrollbarsCustom-content" + (!!contentClassName ? (" " + contentClassName) : ""),
+              trackVerticalClassNames   = "ScrollbarsCustom-track ScrollbarsCustom-trackVertical" + (!!trackVerticalClassName ? (" " + trackVerticalClassName) : ""),
+              trackHorizontalClassNames = "ScrollbarsCustom-track ScrollbarsCustom-trackHorizontal" + (!!trackHorizontalClassName ? (" " + trackHorizontalClassName) : ""),
+              thumbVerticalClassNames   = "ScrollbarsCustom-thumb ScrollbarsCustom-thumbHorizontal" + (!!thumbVerticalClassName ? (" " + thumbVerticalClassName) : ""),
+              thumbHorizontalClassNames = "ScrollbarsCustom-thumb ScrollbarsCustom-thumbHorizontal" + (!!thumbHorizontalClassName ? (" " + thumbHorizontalClassName) : "");
 
         const holderStyles          = {
                   ...style,