滚动条组件，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 的基本用法

使用 将需要使用滚动条的内容包裹即可

1
2
3
4
5
6
7
8
9
10
11
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计算属性让浏览器计算

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

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

定制 Scrollbars

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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

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. 获取一个当前位置的值的对象