react-custom-scrollbars
![npm downloads](https://img.shields.io/npm/dm/react-custom-scrollbars.svg?style=flat-square)
- lightweight scrollbars made of 100% react goodness
- frictionless native browser scrolling
- native scrollbars for mobile devices
- fully customizable
requestAnimationFrame
for 60fps- no extra stylesheets
- IE9+ support
- check out the demo
Table of Contents
Installation
npm install react-custom-scrollbars --save
Usage
import { Scrollbars } from 'react-custom-scrollbars';
class App extends Component {
render() {
return (
<Scrollbars style={{ width: 500, height: 300 }}>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Lorem ipsum dolor sit amet, ...</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"/>
Customization
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>Lorem ipsum dolor sit amet, ...</p>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Lorem ipsum dolor sit amet, ...</p>
<p>Lorem ipsum dolor sit amet, ...</p>
</CustomScrollbars>
);
}
}
API
<Scrollbars>
Props
onScroll
: (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 position
values.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
- The following properties expect a react element to be returned. You can customize the element to your needs.
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 in
Don't forget to pass the received props to your custom element. Example:
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>
);
}
}
Methods
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 height
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>
);
}
}
Receive values about the current position
class CustomScrollbars extends Component {
handleScroll(event, values) {
console.log(values);
}
render() {
return (
<Scrollbars onScroll={this.handleScroll}>
{this.props.children}
</Scrollbars>
);
}
}
Examples
Run the simple example:
npm install
cd react-custom-scrollbars/examples/simple
npm install
npm start
Tests
npm install
npm test
License
MIT