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 'react-custom-scrollbars-2';
class App extends Component {
render() {
return (
<Scrollbars style={{ width: 500, height: 300 }}>
<p>Some great content...</p>
</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"/>
There are several events you can listen to:
import { Scrollbars } from 'react-custom-scrollbars-2';
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.
import { Scrollbars } from 'react-custom-scrollbars-2';
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 { Scrollbars } from 'react-custom-scrollbars-2';
class App extends Component {
render() {
return (
<Scrollbars
// This will activate auto-height
autoHeight
autoHeightMin={100}
autoHeightMax={200}>
<p>Some great content...</p>
</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 'react-custom-scrollbars-2';
class App extends Component {
render() {
return (
// This will activate universal mode
<Scrollbars universal>
<p>Some great content...</p>
</Scrollbars>
);
}
}