title | order |
---|---|
Usage |
2 |
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"
/>
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>
);
}
}
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>
);
}
}
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>
);
};
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>
);
};