Ray-scrollbar NPM

ray-scrolbar

Install

npm install ray-scrolbar --save

Scrollbars

Scrollbars usage

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}>
    );
  }
}

Scrollbars 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

Scrollbars Values

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

Scrollbars Methods

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.

ScrollArea

ScrollArea usage

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 props

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
};

ScrollArea Context

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);