react-custom-scrollbars的作用

流畅的本机浏览器滚动
移动设备的本机滚动条
完全可定制
自动隐藏
自动高度
通用（在客户端和服务器上运行）
requestAnimationFrame 60fps
没有多余的样式表
经过良好测试，代码覆盖率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}>

    );

  }

}

巴特西

react-custom-scrollbars的使用

react-custom-scrollbars的作用

最新文章

热门文章