- lightweight scrollbars made of 100% react goodness
- frictionless native browser scrolling
- native scrollbars for mobile devices
- fully customizable
requestAnimationFramefor 60fps- no extra stylesheets
- IE9+ support
- check out the demo
npm install react-custom-scrollbars --saveimport { Scrollbars } from 'react-custom-scrollbars';
class App extends Component {
render() {
return (
<Scrollbars style={{ width: 500, height: 300 }}>
<p>Some great content...</p>
</Scrollbars>
);
}
}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"/>import { Scrollbars } from 'react-custom-scrollbars';
class CustomScrollbars extends Component {
render() {
return (
<Scrollbars
className="container"
renderScrollbarHorizontal={props => <div {...props} className="scrollbar-horizontal" />}
renderScrollbarVertical={props => <div {...props} className="scrollbar-vertical"/>}
renderThumbHorizontal={props => <div {...props} className="thumb-horizontal"/>}
renderThumbVertical={props => <div {...props} className="thumb-vertical"/>}
renderView={props => <div {...props} className="view"/>}>
{this.props.children}
</Scrollbars>
);
}
}
class App extends Component {
render() {
return (
<CustomScrollbars style={{ width: 500, height: 300 }}>
<p>Some great content...</p>
</CustomScrollbars>
);
}
}NOTE: If you use renderScrollbarHorizontal, make sure that you define a height value with css or inline styles. If you use renderScrollbarVertical, make sure that you define a width value with css or inline styles.
renderScrollbarHorizontal: (Function) Horizontal scrollbar elementrenderScrollbarVertical: (Function) Vertical scrollbar elementrenderThumbHorizontal: (Function) Horizontal thumb elementrenderThumbVertical: (Function) Vertical thumb elementrenderView: (Function) The element your content will be rendered inonScroll: (Function) Event handler. Will be called with the native scroll event and some handy values about the current position.- Signature:
onScroll(event, values) event: (Event) Native onScroll eventvalues: (Object) Values about the current positionvalues.top: (Number) scrollTop progess, from 0 to 1values.left: (Number) scrollLeft progess, from 0 to 1values.clientWidth: (Number) width of the viewvalues.clientHeight: (Number) height of the viewvalues.scrollWidth: (Number) native scrollWidthvalues.scrollHeight: (Number) native scrollHeightvalues.scrollLeft: (Number) native scrollLeftvalues.scrollTop: (Number) native scrollTop
- Signature:
Don't forget to pass the received props to your custom element. Example:
NOTE: If you use renderScrollbarHorizontal, make sure that you define a height value with css or inline styles. If you use renderScrollbarVertical, make sure that you define a width value with css or inline styles.
import { Scrollbars } from 'react-custom-scrollbars';
class CustomScrollbars extends Component {
render() {
return (
<Scrollbars
// Set a custom className
renderScrollbarHorizontal={props => <div {...props} className="scrollbar-vertical"/>}
// Customize inline styles
renderScrollbarVertical={({ style, ...props}) => {
return <div style={{...style, padding: 20}} {...props}/>;
}}>
{this.props.children}
</Scrollbars>
);
}
}scrollTop(top): scroll to the top valuescrollLeft(left): scroll to the left valuescrollToTop(): scroll to topscrollToBottom(): scroll to bottomscrollToLeft(): scroll to leftscrollToRight(): scroll to rightgetScrollLeft: get scrollLeft valuegetScrollTop: get scrollTop valuegetScrollWidth: get scrollWidth valuegetScrollHeight: get scrollHeight valuegetWidth: get view client widthgetHeight: get view client heightgetValues: get an object with values about the current position.left,top,scrollLeft,scrollTop,scrollWidth,scrollHeight,clientWidth,clientHeight
import { Scrollbars } from 'react-custom-scrollbars';
class App extends Component {
handleClick() {
this.refs.scrollbars.scrollToTop()
},
render() {
return (
<div>
<Scrollbars
ref="scrollbars"
style={{ width: 500, height: 300 }}>
{/* your content */}
</Scrollbars>
<button onClick={this.handleClick.bind(this)}>
Scroll to top
</button>
</div>
);
}
}class CustomScrollbars extends Component {
handleScroll(event, values) {
console.log(values);
/*
{
left: 0,
top: 0.21513353115727002
clientWidth: 952
clientHeight: 300
scrollWidth: 952
scrollHeight: 1648
scrollLeft: 0
scrollTop: 290
}
*/
}
render() {
return (
<Scrollbars onScroll={this.handleScroll}>
{this.props.children}
</Scrollbars>
);
}
}Run the simple example:
# Make sure that you've installed the dependencies
npm install
# Move to example directory
cd react-custom-scrollbars/examples/simple
npm install
npm start# Make sure that you've installed the dependencies
npm install
# Run tests
npm testMIT