add custom size for scrollbar

.gitignore

@@ -1,4 +1,3 @@
-/dist/
 /node_modules/
 /bower_components/
 /.vscode/

dist/css/scrollArea.css

@@ -0,0 +1,59 @@
+.scrollarea-content {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  position: relative;
+}
+.scrollarea-content:focus {
+  outline: 0;
+}
+.scrollarea {
+  position: relative;
+  overflow: hidden;
+}
+.scrollarea .scrollbar-container {
+  position: absolute;
+  background: none;
+  opacity: .1;
+  z-index: 9999;
+  -webkit-transition: all .4s;
+  -moz-transition: all .4s;
+  -ms-transition: all .4s;
+  -o-transition: all .4s;
+  transition: all .4s;
+}
+.scrollarea .scrollbar-container.horizontal {
+  width: 100%;
+  height: 10px;
+  left: 0;
+  bottom: 0;
+}
+.scrollarea .scrollbar-container.horizontal .scrollbar {
+  width: 20px;
+  height: 8px;
+  background: black;
+  margin-top: 1px;
+}
+.scrollarea .scrollbar-container.vertical {
+  width: 10px;
+  height: 100%;
+  right: 0;
+  top: 0;
+}
+.scrollarea .scrollbar-container.vertical .scrollbar {
+  width: 8px;
+  height: 20px;
+  background: black;
+  margin-left: 1px;
+}
+.scrollarea .scrollbar-container:hover {
+  background: gray;
+  opacity: .6 !important;
+}
+.scrollarea .scrollbar-container.active {
+  background: gray;
+  opacity: .6 !important;
+}
+.scrollarea:hover .scrollbar-container {
+  opacity: .3;
+}

examples/js/app.jsx

@@ -1,13 +1,14 @@
 import React from 'react'
 import SimpleExample from './simple';
 import ChangingChildren from './changing-children';
+import CustomScrollbar from './custom-scrollbar';
 
 class App extends React.Component {
     constructor(props) {
         super(props);
 
         this.state = {
-            selected: 'basic'
+            selected: 'custom-scrollbar'
         };
     }
 
@@ -23,13 +24,19 @@ class App extends React.Component {
                     <select value={this.state.selected} onChange={this.switchExample.bind(this)}>
                         <option value="basic">Basic</option>
                         <option value="changing-children">Changing Children</option>
+                        <option value="custom-scrollbar">Custom scrollbar</option>
                     </select>
                 </div>
                 {(() => {
-                    if (this.state.selected === 'changing-children') {
-                        return <ChangingChildren/>;
-                    } else {
-                        return <SimpleExample/>;
+                    switch (this.state.selected) {
+                        case 'changing-children':
+                            return <ChangingChildren/>;
+                        case 'basic':
+                            return <SimpleExample/>;
+                        case 'custom-scrollbar':
+                            return <CustomScrollbar/>;
+                        default:
+                            return null;
                     }
                 })()}
             </div>

examples/js/custom-scrollbar.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import ScrollArea from 'react-scrollbar';
+
+class CustomScrollbar extends React.Component{
+    constructor(props){
+        super(props);
+
+        this.state = {
+            itemsCount : 40
+        };
+    }
+
+    render() {
+        var itemElements = [];
+
+        for( var i = 0; i< this.state.itemsCount; i++){
+            itemElements.push(<div className="item" key={i}>item {i}</div>);
+        }
+
+        let scrollbarStyles = {borderRadius: 5};
+
+        return (
+            <div>
+                <ScrollArea
+                  className="area"
+                  contentClassName="custom-content"
+                  horizontal={false}
+                  verticalScrollbarStyle={{
+                    backgroundColor: 'black',
+                  }}
+                  verticalContainerStyle={{
+                    backgroundColor: '#e6e6e6',
+                    position: 'absolute',
+                    width: '10px',
+                    top: '25%',
+                    right: '8%',
+                    marginRight: '20px',
+                    height: '200px',
+                    overflow: 'hidden',
+                    borderWidth: '1px',
+                    borderColor: 'black',
+                    borderStyle: 'solid',
+                  }}
+                  horizontalScrollbarStyle={scrollbarStyles}
+                  horizontalContainerStyle={scrollbarStyles}
+                  smoothScrolling= {true}
+                  minScrollSize={40}
+                  onScroll={this.handleScroll}
+                  >
+
+                    {itemElements}
+
+                </ScrollArea>
+
+            </div>
+        );
+    }
+}
+
+export default CustomScrollbar;

examples/less/site.less

@@ -24,6 +24,20 @@ body{
         height: 300px;
         background: #e5e5e5;
 
+        .custom-content{
+            width: auto;
+
+            .item{
+                background: #82bb95;
+                width: 180px;
+                height: 70px;
+                margin: 10px;
+                float: left;
+                padding: 8px;
+                box-sizing: border-box;
+            }
+        }
+
         .content{
             width: 400px;
 

src/js/ScrollArea.jsx

@@ -95,9 +95,11 @@ export default class ScrollArea extends React.Component {
 
         let scrollbarY = this.canScrollY() ? (
             <ScrollBar
+                onRef={ref => this.scrollbarY = ref}
                 ownerDocument={ownerDocument}
                 realSize={this.state.realHeight}
                 containerSize={this.state.containerHeight}
+                scrollbarSize={this.state.scrollbarYHeight || 0}
                 position={this.state.topPosition}
                 onMove={this.handleScrollbarMove.bind(this)}
                 onPositionChange={this.handleScrollbarYPositionChange.bind(this)}
@@ -111,9 +113,11 @@ export default class ScrollArea extends React.Component {
 
         let scrollbarX = this.canScrollX() ? (
             <ScrollBar
+                onRef={ref => this.scrollbarX = ref}
                 ownerDocument={ownerDocument}
                 realSize={this.state.realWidth}
                 containerSize={this.state.containerWidth}
+                scrollbarSize={this.state.scrollbarXWidth || 0}
                 position={this.state.leftPosition}
                 onMove={this.handleScrollbarMove.bind(this)}
                 onPositionChange={this.handleScrollbarXPositionChange.bind(this)}
@@ -379,7 +383,9 @@ export default class ScrollArea extends React.Component {
             realHeight: realHeight,
             containerHeight: containerHeight,
             realWidth: realWidth,
-            containerWidth: containerWidth
+            containerWidth: containerWidth,
+            scrollbarXWidth: this.scrollbarX && this.scrollbarX.offsetWidth,
+            scrollbarYHeight: this.scrollbarY && this.scrollbarY.offsetHeight,
         };
     }
 

src/js/Scrollbar.jsx

@@ -28,6 +28,7 @@ class ScrollBar extends React.Component {
             this.props.ownerDocument.addEventListener("mousemove", this.bindedHandleMouseMove);
             this.props.ownerDocument.addEventListener("mouseup", this.bindedHandleMouseUp);
         }
+        this.props.onRef(this.scrollbarContainer);
     }
 
     componentWillReceiveProps(nextProps){
@@ -52,7 +53,7 @@ class ScrollBar extends React.Component {
         let proportionalToPageScrollSize = props.containerSize * props.containerSize / props.realSize;
         let scrollSize = proportionalToPageScrollSize < props.minScrollSize ? props.minScrollSize : proportionalToPageScrollSize;
 
-        let scrollPosition = (props.containerSize - scrollSize) * fractionalPosition;
+        let scrollPosition = (props.scrollbarSize - scrollSize) * fractionalPosition;
         return {
             scrollSize: scrollSize,
             position: Math.round(scrollPosition)