React implementation of smooth-scrollbar
npm install react-smooth-scrollbarsmooth-scrollbar for react projects.
React 0.14+
```
npm install react-smooth-scrollbar smooth-scrollbar --save
http://idiotwu.github.io/react-smooth-scrollbar/
`js
import React from 'react';
import ReactDOM from 'react-dom';
import Scrollbar from 'react-smooth-scrollbar';
class App extends React.Component {
render() {
return (
thumbMinSize={number},
syncCallbacks={boolean},
renderByPixels={boolean},
alwaysShowTracks={boolean},
continuousScrolling={boolean},
wheelEventTarget={element},
plugins={object},
onScroll={func},
>
your contents here...
);
}
}
ReactDOM.render(
`
| 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). |number
| thumbMinSize | | 20 | Minimal size for scrollbar thumbs. |boolean
| renderByPixels | | true | Render every frame in integer pixel values, set to true to improve scrolling performance. |boolean
| alwaysShowTracks | | false | Keep scrollbar tracks visible. |boolean
| continuousScrolling | | true | Set to true to allow outer scrollbars continue scrolling when current scrollbar reaches edge. |EventTarget
| wheelEventTarget | | 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. |object
| plugins | | {} | Options for plugins, see Plugin System. |
Confusing with the option field? Try edit tool here!
`js
import { Component } from 'react';
import PropTypes from 'prop-types';
import SmoothScrollbar from 'smooth-scrollbar';
import OverscrollPlugin from 'smooth-scrollbar/plugins/overflow';
import Scrollbar from 'react-smooth-scrollbar';
SmoothScrollbar.use(OverscrollPlugin);
class App2 extends Component {
render() {
return (
);
}
}
`
1. Use ref in parent component:
`javascript
class Parent extends React.Component {
componentDidMount() {
const { scrollbar } = this.$container;
}
render() {
return (
your content...
);
}
}
`
2. Use Context in child component:
`javascript
class Child extends React.Component {
static contextTypes = {
getScrollbar: React.PropTypes.func
};
componentDidMount() {
this.context.getScrollbar((scrollbar) => {
// ...
});
}
render() {
return
class App extends React.Component {
render(){
return (
);
}
}
``
MIT.
