# Scrollbars

## 案例演示

### 基本使用

---demo
```js
import { Scrollbars } from 'amos-framework';

ReactDOM.render(
<div style={{ width: '200px', height: '200px' }}>
  <Scrollbars>
    <div style={{ height: '900px' }}>content ...</div>
  </Scrollbars>
</div>
  , _react_runner_);
```
---demoend

### 自动隐藏

---demo
```js
import { Scrollbars } from 'amos-framework';

ReactDOM.render(
<div style={{ width: '200px', height: '200px' }}>
  <Scrollbars autoHide>
    <div style={{ height: '900px' }}>content ...</div>
  </Scrollbars>
</div>
  , _react_runner_);
```
---demoend

## Usage

* basic use

```js
import { Scrollbars } from 'amos-framework';

<Scrollbars style={{ width: 500, height: 300 }}>
  <p>Some large content...</p>
</Scrollbars>
```

* custom use

```js
import { Scrollbars } from 'amos-framework';

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}
        renderHorizontalTrack={this.renderHorizontalTrack}
        renderVerticalTrack={this.renderVerticalTrack}
        renderHorizontalThumb={this.renderHorizontalThumb}
        renderVerticalThumb={this.renderVerticalThumb}
        autoHide
        autoHideTimeout={1000}
        autoHideDuration={200}
        autoHeight
        autoHeightMin={0}
        autoHeightMax={200}
        thumbMinSize={30}
        {...this.props}>
    );
  }
}
```

### Scrollbars props

| params| type | default | description |
| ------ | ------ | ------ | ------ |
| onScroll | `func: (event) => {}` | - | Event handler, 滚动时的回调函数 |
| onScrollFrame | `func: (values: [Values](#Values)) => {}` | - |  每一帧更新时的回调. |
| onScrollStart | `func: (event) => {}` | - | 开始滚动时的回调 |
| onScrollStop | `func: (event) => {}` | - | 结束滚动时的回调 |
| onUpdate | `func: (values: [Values](#Values)) => {}` | - | 组件更新时的回调，同时会触发每一帧更新 |
| renderView | `func: () => JSX.Element` | - | 自定义渲染内容区外层包裹组件，默认为 div |
| renderHorizontalTrack | `func: () => JSX.Element` | - | 渲染水平滚动条 track |
| renderVerticalTrack | `func: () => JSX.Element` | - | 渲染垂直滚动条 track |
| renderHorizontalThumb | `func: () => JSX.Element` | - | 渲染水平滚动条 thumb |
| renderVerticalThumb | `func: () => JSX.Element` | - | 渲染垂直滚动条 thumb |
| hideTracksWhenNotNeed | boolean | false | 内容未溢出容器时隐藏轨迹（`visibility:hidden`）. |
| thumbSize | Number | - | 设置 thumb 大小，单位为 px. |
| thumbMinSize | Number | 30 | 设置 thumb 最小值，单位为 px. |
| autoHide | boolean | false | 是否启用自动隐藏模式。当设置为 `true` 时，轨迹将自动隐藏，并且仅在滚动时可见。 |
| autoHideTimeout | Number | 1000 | 自动隐藏延迟时间，单位为 ms. |
| autoHideDuration | Number | 200 | 自动隐藏持续时间，单位为 ms. （设置 `opacity ${autoHideDuration}ms`） |
| autoHeight | boolean | false | 是否启用自动高度模式。当设置为 `true` 时，容器高度会随内容变化而变化 |
| autoHeightMin | Number | 0 | 设置自动高度模式的最小高度 |
| autoHeightMax | Number | 200 | 设置自动高度模式的最大高度 |
| universal | boolean | false | 启用后端渲染. [Learn how to use universal rendering](https://reactjs.org/docs/react-dom-server.html) |

> 注意，内部 scrollbarWidth 的计算，依赖于 body 中 scrollbar 的 width。

### Values

| params| type | default | description |
| ------ | ------ | ------ | ------ |
| top | Number | - | scrollTop progess, from 0 to 1 |
| left | Number | - | scrollLeft progess, from 0 to 1 |
| clientWidth | Number | - | Width of the view |
| clientHeight | Number | - | Height of the view |
| scrollWidth, | Number | - | Native scrollWidth |
| scrollHeight  | Number | - | Native scrollHeight |
| scrollLeft  | Number | - | Native scrollLeft |
| scrollTop | Number | - | Native scrollTop |

## 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
* `getScrollTop()`: get scrollTop value
* `getScrollWidth()`: get scrollWidth value
* `getScrollHeight()`: get scrollHeight value
* `getClientWidth()`: 获取 view 区域的 client width
* `getClientHeight()`: 获取 view 区域的 client height
* `getValues()`: 获取当前位置的 [Values](#Values) 值.