滚动条组件，react-custom-scrollbars

发现一个简单的滚动条npm包，这可以让我们抛弃浏览器原始的丑陋滚动条
npm地址：https://www.npmjs.com/package/react-custom-scrollbars
cnpm镜像地址：https://cnpmjs.org/package/react-custom-scrollbars
gitHub上的高级用法：https://github.com/malte-wessel/react-custom-scrollbars/tree/master/docs
gitHub上API文档：https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/API.md

Scrollbars 的基本用法

使用 <Scrollbars> </Scrollbars> 将需要使用滚动条的内容包裹即可

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

可以使用Css3的calc计算属性让浏览器计算

<Scrollbars style={{ height: 'calc(100vh - 180px)' }}>

Css3的calc计算属性参考：
https://blog.youkuaiyun.com/bomess/article/details/51285873

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

API

<Scrollbars>

Props

• onScroll: (Function) Event handler （事件处理程序）
  • Signature: onScroll(event)
• onScrollFrame: (Function) Runs inside the animation frame. （在动画帧内运行）
  • Signature: onScroll(values)
  • values: (Object) Values about the current position （当前位置的值）
    • values.top: (Number) scrollTop progess, from 0 to 1 （scrollTop 进度条，从0到1）
    • values.left: (Number) scrollLeft progess, from 0 to 1 （scrollLeft 进度条，从0到1）
    • values.clientWidth: (Number) Width of the view （视图宽度）
    • values.clientHeight: (Number) Height of the view （视野高度）
    • values.scrollWidth: (Number) Native scrollWidth （本机scrollWidth）
    • values.scrollHeight: (Number) Native scrollHeight （本机scrollHeight）
    • values.scrollLeft: (Number) Native scrollLeft （本机scrollLeft）
    • values.scrollTop: (Number) Native scrollTop （本机scrollTop）
• onScrollStart (Function) Called when scrolling starts （滚动开始时调用）
• onScrollStop (Function) Called when scrolling stops （滚动停止时调用）
• onUpdate (Function) Called when ever the component is updated. Runs inside the animation frame （当组件更新时调用。在动画帧内运行）
  • Signature: onUpdate(values)
• renderView: (Function) The element your content will be rendered in （内容将在其中呈现的元素）
• renderTrackHorizontal: (Function) Horizontal track element （水平跟踪元素）
• renderTrackVertical: (Function) Vertical track element （垂直跟踪元素）
• renderThumbHorizontal: (Function) Horizontal thumb element （水平拇指滑动元素）
• renderThumbVertical: (Function) Vertical thumb element （垂直拇指滑动元素）
• hideTracksWhenNotNeeded: (Boolean) Hide tracks (visibility: hidden) when content does not overflow container. (default: false). （隐藏痕迹(visibility: hidden)当内容不溢出容器. (default: false）
• thumbSize: (Number) Set a fixed size for thumbs in px. （为拇指滑动设置一个固定的大小，单位为px）
• thumbMinSize: (Number) Minimal thumb size in px. (default: 30) （最小拇指大小(px)。）
• autoHide: (Boolean) Enable auto-hide mode (default: false) （启用自动隐藏模式）
  • When true tracks will hide automatically and are only visible while scrolling. （值为“true”，轨道将自动隐藏，只在滚动时可见）
• autoHideTimeout: (Number) Hide delay in ms. (default: 1000) （在ms中隐藏延迟）
• autoHideDuration: (Number) Duration for hide animation in ms. (default: 200) （在ms中隐藏动画的持续时间。）
• autoHeight: (Boolean) Enable auto-height mode. (default: false) （启用自动调整模式）
  • When true container grows with content （值为“true”，容器与内容一起增长）
• autoHeightMin: (Number) Set a minimum height for auto-height mode (default: 0) （为自动高度模式设置最小高度）
• autoHeightMax: (Number) Set a maximum height for auto-height mode (default: 200) （为自动高度模式设置最大高度）
• universal: (Boolean) Enable universal rendering (default: false) （启动普遍呈现）

Methods

• scrollTop(top = 0): scroll to the top value 滚动到顶部值
• scrollLeft(left = 0): scroll to the left value 滚动到左边的值
• scrollToTop(): scroll to top 滚动到顶部
• scrollToBottom(): scroll to bottom 滚动到底部
• scrollToLeft(): scroll to left 滚动到左边
• scrollToRight(): scroll to right 滚动到右边
• getScrollLeft(): get scrollLeft value 获得 scrollLeft 值
• getScrollTop(): get scrollTop value 获得 scrollTop 值
• getScrollWidth(): get scrollWidth value 获得 scrollWidth 值
• getScrollHeight(): get scrollHeight value 获得 scrollHeight 值
• getClientWidth(): get view client width 获取视图客户端宽度
• getClientHeight(): get view client height 获取视图客户端高度
• getValues(): get an object with values about the current position. 获取一个当前位置的值的对象