react-smooth-scrollbar
smooth-scrollbar for react projects.
Requirements
React 0.14+
Install
npm install react-smooth-scrollbar smooth-scrollbar --save
Demo
http://idiotwu.github.io/react-smooth-scrollbar/
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import Scrollbar from 'react-smooth-scrollbar';
class App extends React.Component {
render() {
return (
<Scrollbar
damping={number}
thumbMinSize={number}
syncCallbacks={boolean}
renderByPixels={boolean}
alwaysShowTracks={boolean}
continuousScrolling={boolean}
wheelEventTarget={element}
plugins={object}
onScroll={func}
>
your contents here...
</Scrollbar>
);
}
}
ReactDOM.render(<App />, document.body);Available Options
| parameter | type | default | description |
|---|---|---|---|
| damping | number |
0.1 |
Momentum reduction damping factor, a float value between (0, 1). The lower the value is, the more smooth the scrolling will be (also the more paint frames). |
| thumbMinSize | number |
20 |
Minimal size for scrollbar thumbs. |
| renderByPixels | boolean |
true |
Render every frame in integer pixel values, set to true to improve scrolling performance. |
| alwaysShowTracks | boolean |
false |
Keep scrollbar tracks visible. |
| continuousScrolling | boolean |
true |
Set to true to allow outer scrollbars continue scrolling when current scrollbar reaches edge. |
| wheelEventTarget | EventTarget |
null |
Element to be used as a listener for mouse wheel scroll events. By default, the container element is used. This option will be useful for dealing with fixed elements. |
| plugins | object |
{} |
Options for plugins, see Plugin System. |
Confusing with the option field? Try edit tool here!
Using Scrollbar Plugins
import { Component } from 'react';
import PropTypes from 'prop-types';
import SmoothScrollbar from 'smooth-scrollbar';
import OverscrollPlugin from 'smooth-scrollbar/plugins/overscroll';
import Scrollbar from 'react-smooth-scrollbar';
SmoothScrollbar.use(OverscrollPlugin);
class App2 extends Component {
render() {
return (
<Scrollbar> ... </Scrollbar>
);
}
}Get Scrollbar Instance
-
Use
refin parent component:class Parent extends React.Component { componentDidMount() { const { scrollbar } = this.$container; } render() { return ( <Scrollbar ref={c => this.$container = c}> your content... </Scrollbar> ); } }
-
Use
Contextin child component:class Child extends React.Component { static contextTypes = { getScrollbar: React.PropTypes.func }; componentDidMount() { this.context.getScrollbar((scrollbar) => { // ... }); } render() { return <div> this is child component. </div>; } } class App extends React.Component { render(){ return ( <Scrollbar> <Child /> </Scrollbar> ); } }
APIs
License
MIT.
