diff --git a/README.md b/README.md index f44e19a..380f06e 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,8 @@ then open [http://localhost:8003](http://localhost:8003). className={String} style={Object} contentClassName={String} + containerClassName={String} + scrollbarClassName={String} contentStyle={Object} horizontal={Boolean} horizontalContainerStyle={Object} @@ -132,6 +134,12 @@ Inline styles applied to the main scroll area component. #### contentClassName CSS class names added to element with scroll area content. +#### containerClassName +CSS class name added to scrollbar container element. + +#### scrollbarClassName +CSS class name added to scrollbar element. + #### contentStyle Inline styles applied to element with scroll area content. diff --git a/src/js/ScrollArea.jsx b/src/js/ScrollArea.jsx index 45a5957..b4d54f1 100644 --- a/src/js/ScrollArea.jsx +++ b/src/js/ScrollArea.jsx @@ -99,6 +99,8 @@ export default class ScrollArea extends React.Component { onPositionChange={this.handleScrollbarYPositionChange.bind(this)} containerStyle={this.props.verticalContainerStyle} scrollbarStyle={this.props.verticalScrollbarStyle} + className={this.props.scrollbarClassName} + containerClassName={this.props.containerClassName} smoothScrolling={withMotion} minScrollSize={this.props.minScrollSize} onFocus={this.focusContent.bind(this)} @@ -115,6 +117,8 @@ export default class ScrollArea extends React.Component { onPositionChange={this.handleScrollbarXPositionChange.bind(this)} containerStyle={this.props.horizontalContainerStyle} scrollbarStyle={this.props.horizontalScrollbarStyle} + className={this.props.scrollbarClassName} + containerClassName={this.props.containerClassName} smoothScrolling={withMotion} minScrollSize={this.props.minScrollSize} onFocus={this.focusContent.bind(this)} @@ -454,6 +458,8 @@ ScrollArea.propTypes = { style: React.PropTypes.object, speed: React.PropTypes.number, contentClassName: React.PropTypes.string, + scrollbarClassName: React.PropTypes.string, + containerClassName: React.PropTypes.string, contentStyle: React.PropTypes.object, vertical: React.PropTypes.bool, verticalContainerStyle: React.PropTypes.object, diff --git a/src/js/Scrollbar.jsx b/src/js/Scrollbar.jsx index 98258d4..6295758 100644 --- a/src/js/Scrollbar.jsx +++ b/src/js/Scrollbar.jsx @@ -59,13 +59,13 @@ class ScrollBar extends React.Component { } render(){ - let {smoothScrolling, isDragging, type, scrollbarStyle, containerStyle} = this.props; + let {smoothScrolling, isDragging, type, scrollbarStyle, className, containerStyle, containerClassName} = this.props; let isVoriziontal = type === 'horizontal'; let isVertical = type === 'vertical'; let scrollStyles = this.createScrollStyles(); let springifiedScrollStyles = smoothScrolling ? modifyObjValues(scrollStyles, x => spring(x)) : scrollStyles; - let scrollbarClasses = `scrollbar-container ${isDragging ? 'active' : ''} ${isVoriziontal ? 'horizontal' : ''} ${isVertical ? 'vertical' : ''}`; + let scrollbarClasses = `scrollbar-container ${containerClassName || ''} ${isDragging ? 'active' : ''} ${isVoriziontal ? 'horizontal' : ''} ${isVertical ? 'vertical' : ''}`; return ( @@ -77,7 +77,7 @@ class ScrollBar extends React.Component { ref={ x => this.scrollbarContainer = x } >
@@ -167,6 +167,8 @@ ScrollBar.propTypes = { realSize: React.PropTypes.number, containerSize: React.PropTypes.number, position: React.PropTypes.number, + className: React.PropTypes.string, + containerClassName: React.PropTypes.string, containerStyle: React.PropTypes.object, scrollbarStyle: React.PropTypes.object, type: React.PropTypes.oneOf(['vertical', 'horizontal']),