ray-scrollbar

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

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

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

changelog

v1.0.4

modify Scrolbar autoHide content hover

v1.0.3

add ScrollArea

v1.0.2

add horizontalTrackClassName and verticalTrackClassName

License

MIT