react-custom-scrollbars的使用

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}>
    );
  }
}