smooth-scrollbar for react projects.
React 0.14+
npm install react-smooth-scrollbar --save
http://idiotwu.github.io/react-smooth-scrollbar/
import React from 'react';
import ReactDOM from 'react-dom';
import Scrollbar from 'react-smooth-scrollbar';
class App extends React.Component {
render() {
return (
<Scrollbar
speed={Number}
friciton={Number}
thumbMinSize={Number}
ignoreEvents={Array}
continuousScrolling={Boolean}
>
your contents here...
</Scrollbar>
);
}
}
ReactDOM.render(<App />, document.body);
parameter | type | default | description |
---|---|---|---|
speed | Number | 1 | Scrolling speed scale. |
friction | Number | 10 | Scrolling friction, a percentage value within (1, 100). |
thumbMinSize | Number | 20 | Minimal size for scrollbar thumb. |
continuousScrolling | Boolean|String | 'auto' | Whether allow upper scrollable content to continue scrolling when current scrollbar reaches edge. When set to 'auto', it will be enabled on nested scrollbars, and disabled on first-class scrollbars. |
ignoreEvents | Array | [] | A list of events names that are ignored, regex rules are supported. Details here. |
Confusing with the option field? Try edit tool here!
-
Use
ref
in parent component:class Parent extends React.Component { componentDidMount() { const { scrollbar } = this.refs.child; } render() { return ( <Scrollbar ref="child"> your content... </Scrollbar> ); } }
-
Use
Context
in 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> ); } }
MIT.