react-custom-scrollbars的作用

1. 流畅的本机浏览器滚动
2. 移动设备的本机滚动条
3. 完全可定制
4. 自动隐藏
5. 自动高度
6. 通用（在客户端和服务器上运行）

7. requestAnimationFrame

    60fps
8. 没有多余的样式表
9. 经过良好测试，代码覆盖率100％

安装

npm install react-custom-scrollbars --save　　　　

基本用法

import { Scrollbars } from 'react-custom-scrollbars';
class App extends Component {
render() {
return (
<Scrollbars style={{ width: 500, height: 300 }}>
<p>Some great content...</p>
</Scrollbars>
);
}
}　　

　可配置：

import { Scrollbars } from 'react-custom-scrollbars';

class CustomScrollbars extends Component {
render() {
return (
<Scrollbars
onScroll={this.handleScroll}
onScrollFrame={this.handleScrollFrame}
onScrollStart={this.handleScrollStart}
onScrollStop={this.handleScrollStop}
onUpdate={this.handleUpdate}
renderView={this.renderView}
renderTrackHorizontal={this.renderTrackHorizontal}
renderTrackVertical={this.renderTrackVertical}
renderThumbHorizontal={this.renderThumbHorizontal}
renderThumbVertical={this.renderThumbVertical}
autoHide
autoHideTimeout={1000}
autoHideDuration={200}
autoHeight
autoHeightMin={0}
autoHeightMax={200}
thumbMinSize={30}
universal={true}
{...this.props}>
);
}
}