usage.md

title	order
Usage	2

Usage

Default Scrollbars

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 React from 'react';
import { Scrollbars } from 'rc-scrollbars';
import { Lorem } from './components/Lorem';

export default () => (
  <Scrollbars style={{ width: 300, height: 300 }}>
    <Lorem />
  </Scrollbars>
);

Also don't forget to set the viewport meta tag, if you want to support mobile devices

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

Events

There are several events you can listen to:

import { Scrollbars } from 'rc-scrollbars';

class App extends Component {
  render() {
    return (
      <Scrollbars
        // Will be called with the native scroll event
        onScroll={this.handleScroll}
        // Runs inside the animation frame. Passes some handy values about the current scroll position
        onScrollFrame={this.handleScrollFrame}
        // Called when scrolling starts
        onScrollStart={this.handleScrollStart}
        // Called when scrolling stops
        onScrollStop={this.handlenScrollStop}
        // Called when ever the component is updated. Runs inside the animation frame
        onUpdate={this.handleUpdate}
      >
        <p>Some great content...</p>
      </Scrollbars>
    );
  }
}

Auto-hide

You can activate auto-hide by setting the autoHide property.

Check out demo

import { Scrollbars } from 'rc-scrollbars';

class App extends Component {
  render() {
    return (
      <Scrollbars
        // This will activate auto hide
        autoHide
        // Hide delay in ms
        autoHideTimeout={1000}
        // Duration for hide animation in ms.
        autoHideDuration={200}
      >
        <p>Some great content...</p>
      </Scrollbars>
    );
  }
}

Auto-height

You can activate auto-height by setting the autoHeight property.

import React from 'react';
import { Scrollbars } from 'rc-scrollbars';
import { Lorem } from './components/Lorem';

export default () => {
  return (
    <Scrollbars autoHeight autoHeightMin={100} autoHeightMax={200}>
      <Lorem />
    </Scrollbars>
  );
};

Universal rendering

If your app runs on both client and server, activate the universal mode. This will ensure that the initial markup on client and server are the same:

import { Scrollbars } from 'rc-scrollbars';

export const Component = () => {
  return (
    <Scrollbars universal>
      <p>Some great content...</p>
    </Scrollbars>
  );
};