npm install ray-scrolbar --save
import Scrollbars from 'ray-scrolbar';
The <Scrollbars>
component works out of the box with some default styles. The only thing you need to care about is that the component has a width
and height
:
import Scrollbars from 'ray-scrolbar';
class App extends Component {
render() {
return (
<Scrollbars style={{ width: 500, height: 300 }}>
<p>Some large content...</p>
</Scrollbars>
);
}
}
The <Scrollbars>
component is completely customizable. Check out the following code:
import Scrollbars from 'ray-scrolbar';
class CustomScrollbars extends Component {
render() {
return (
<Scrollbars
onScroll={this.handleScroll}
onScrollFrame={this.handleScrollFrame}
onScrollStart={this.handleScrollStart}
onScrollStop={this.handleScrollStop}
onUpdate={this.handleUpdate}
renderView={this.renderView}
renderHorizontalTrack={this.renderHorizontalTrack}
renderVerticalTrack={this.renderVerticalTrack}
renderHorizontalThumb={this.renderHorizontalThumb}
renderVerticalThumb={this.renderVerticalThumb}
autoHide
autoHideTimeout={1000}
autoHideDuration={200}
autoHeight
autoHeightMin={0}
autoHeightMax={200}
thumbMinSize={30}
universal={true}
{...this.props}>
);
}
}
params | type | default | description |
---|---|---|---|
onScroll | func: (event) => {} |
- | Event handler |
onScrollFrame | func: (values: Values) => {} | - | Runs inside the animation frame. |
onScrollStart | func: (event) => {} |
- | Called when scrolling starts |
onScrollStop | func: (event) => {} |
- | Called when scrolling stops |
onUpdate | func: (values: Values) => {} | - | Called when ever the component is updated. Runs inside the animation frame |
renderView | func: () => JSX.Element |
- | The element your content will be rendered in |
renderHorizontalTrack | func: () => JSX.Element |
- | Horizontal track element |
renderVerticalTrack | func: () => JSX.Element |
- | Vertical track element |
renderHorizontalThumb | func: () => JSX.Element |
- | Horizontal thumb element |
renderVerticalThumb | func: () => JSX.Element |
- | Vertical thumb element |
hideTracksWhenNotNeed | boolean | false | Hide tracks (visibility: hidden ) when content does not overflow container. |
thumbSize | Number | - | Set a fixed size for thumbs in px. |
thumbMinSize | Number | 30 | Minimal thumb size in px. |
autoHide | boolean | false | Enable auto-hide mode. When true tracks will hide automatically and are only visible while scrolling. |
autoHideTimeout | Number | 1000 | Hide delay in ms. |
autoHideDuration | Number | 200 | Duration for hide animation in ms. |
autoHeight | boolean | false | Enable auto-height mode. When true container grows with content |
autoHeightMin | Number | 0 | Set a minimum height for auto-height mode |
autoHeightMax | Number | 200 | Set a maximum height for auto-height mode |
universal | boolean | false | Enable universal rendering. Learn how to use universal rendering |
customScrollbarWidth | number | - | custom scrollbar size |
params | type | default | description |
---|---|---|---|
top | Number | - | scrollTop progess, from 0 to 1 |
left | Number | - | scrollLeft progess, from 0 to 1 |
clientWidth | Number | - | Width of the view |
clientHeight | Number | - | Height of the view |
scrollWidth, | Number | - | Native scrollWidth |
scrollHeight | Number | - | Native scrollHeight |
scrollLeft | Number | - | Native scrollLeft |
scrollTop | Number | - | Native scrollTop |
-
scrollTop(top = 0)
: scroll to the top value -
scrollLeft(left = 0)
: scroll to the left value -
scrollToTop()
: scroll to top -
scrollToBottom()
: scroll to bottom -
scrollToLeft()
: scroll to left -
scrollToRight()
: scroll to right -
getScrollLeft()
: get scrollLeft value -
getScrollTop()
: get scrollTop value -
getScrollWidth()
: get scrollWidth value -
getScrollHeight()
: get scrollHeight value -
getClientWidth()
: get view client width -
getClientHeight()
: get view client height -
getValues()
: get an object with values about the current position.
import ScrollArea from 'ray-scrollbar/lib/scrollarea';
class ScrollAreaDemo extends Component {
render() {
return (
<div style={{ width: '200px', height: '200px' }}>
<ScrollArea>
<div style={{ height: '900px' }}>content ...</div>
</ScrollArea>
</div>
);
}
}
export default ScrollAreaDemo;
ScrollArea.childContextTypes = {
scrollArea: PropTypes.object
};
ScrollArea.propTypes = {
children: PropTypes.node,
// CSS class names added to main scroll area component.
className: PropTypes.string,
// Inline styles applied to the main scroll area component.
style: PropTypes.object,
// Scroll speed applied to mouse wheel event. **Default: 1**
speed: PropTypes.number,
// CSS class names added to element with scroll area content.
contentClassName: PropTypes.string,
// Inline styles applied to element with scroll area content.
contentStyle: PropTypes.object,
// When set to false, vertical scrollbar will not be available, regardless of the content height.**Default: true**
vertical: PropTypes.bool,
// Inline styles applied to vertical scrollbar's container.
verticalContainerStyle: PropTypes.object,
// Inline styles applied to vertical scrollbar.
verticalScrollbarStyle: PropTypes.object,
// When set to false, horizontal scrollbar will not be available. **Default: true**
horizontal: PropTypes.bool,
// Inline styles applied to horizontal scrollbar's container.
horizontalContainerStyle: PropTypes.object,
// Inline styles applied to horizontal scrollbar.
horizontalScrollbarStyle: PropTypes.object,
/*
`onScroll(value: Object)` event which can notify the parent component when the container scrolls.
- `value: Object` - informations about current position
- `value.leftPosition: Number` - content left position (distance in pixels from the left side of container)
- `value.topPosition: Number` - content top position (distance in pixels from the top of container)
- `value.containerHeight: Number` - container height
- `value.containerWidth: Number` - container width
- `value.realHeight: Number` - real content height
- `value.realWidth: Number` - real content width
*/
onScroll: PropTypes.func,
// You can override window to make scrollarea works inside iframe. **Default: window**
contentWindow: PropTypes.any,
// You can override document to make scrollarea works inside iframe. **Default: document**
ownerDocument: PropTypes.any,
// Using this prop it's possible to set minimal size in px for both scrollbars.
minScrollSize: PropTypes.number,
// After set to true, mouse wheel event has swapped directions.
// So normal scrolling moves horizontal scrollbar and scrolling with SHIFT key moves vertical scrollbar.
// It could be useful for applications with horizontal layout. **Default: false**
swapWheelAxes: PropTypes.bool,
// After set to true, mouse wheel event will not propagate.
// This option is specifically useful in preventing nested scroll areas from propagating scroll actions to parent scroll areas.
// **Default: false**
stopScrollPropagation: PropTypes.bool,
// After set to a number, scrollarea-content is rendered with a tabindex value set to the passed in.
// This option is specifically useful in allowing the scroll area to be focusable. **Default: undefined**
focusabconstabIndex: PropTypes.number,
// In some scenarios, it is necessary to set the custom scrollbar size and automatically calculate the scrollbar size. In the body zoom scenario, bugs may occur
customScrollbarWidth: PropTypes.number
};
use context
class Content extends Component {
...
}
Content.contextTypes = {
scrollArea: PropTypes.object
};
// context methods
this.context.scrollArea.refresh(); // That method allows manual refreshing of the scrollbar.
this.context.scrollArea.scrollTop(); // It allows to scroll to the top of `ScrollArea` component.
this.context.scrollArea.scrollBottom(); // It allows to scroll to the bottom of `ScrollArea` component.
// It moves vertical scrollbar. `topPosition` is a distance between the top of `scrollArea` container and the top of `scrollArea` content.
this.context.scrollArea.scrollXTo(topPosition);
this.context.scrollArea.scrollLeft(); // It allows to scroll to the left of `ScrollArea` component.
this.context.scrollArea.scrollRight(); // It allows to scroll to the right of `ScrollArea` component.
// It moves horizontal scrollbar. `leftPosition` is a distance between left edge of `scrollArea` container and left edge of `scrollArea` content.
this.context.scrollArea.scrollYTo(leftPosition);
modify Scrolbar
autoHide content hover
add ScrollArea
add horizontalTrackClassName
and verticalTrackClassName
MIT