# Scroller 滚动条

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/scroller/freepass)
- 平台：PC
- 维护者：王斌
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Scroller]

## 代码演示

### 基础用法

```jsx
import React from "react";
import { Scroller } from "@weapp/ui";

const style = {
  lineHeight: '30px',
  height: '30px',
  fontSize: '15px',
}

class ScrollerDemo extends React.Component<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {
      items: Array.from(new Array(70).keys()),
    }
  }

  onScroll = (e: any) => {
    console.log('onScroll', e)
  }

  render() {
    return (
      <div>
        {/* 页面滑动加载事件 */}
        <Scroller height={360} onScroll={this.onScroll}>
          <div style={{ paddingBottom: '15px' }}>
            {this.state.items.map((e: any) => (
              <div key={e} style={style}>
                测试数据: 第{e + 1}条
              </div>
            ))}
          </div>
        </Scroller>
      </div>
    );
  }
}

export default ScrollerDemo;
```

### 横向滚动

```jsx
import React from "react";
import { Scroller } from "@weapp/ui";

const style = {
  height: '180px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  width: '150%',
  background: 'white',
  paddingRight: '20px'
}

const spanStyle = {
  padding: '5px',
  fontSize: '16px',
}
class HorizontalDemo extends React.Component<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {
    }
  }

  render() {
    return (
      <div style={{ background: 'white' }}>
        <Scroller direction={'h'}>
          <div style={style}>
            <span style={spanStyle}>left</span>
            <span style={spanStyle}>right</span>
          </div>
        </Scroller>
      </div>
    );
  }
}

export default HorizontalDemo;
```

### 同时横向纵向滚动

```jsx
import React from "react";
import { Scroller } from "@weapp/ui";

const style = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
  height: '560px',
}

const spanStyle = {
  padding: '5px',
}

class BothDemo extends React.Component<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {
    }
  }

  render() {
    return (
      <div style={{ background: '#eadcdc' }}>
        <Scroller height={360} direction={'both'}>
          <div style={{ fontSize: '16px', width: '150%', padding: '0 10px 10px 0' }}>
            <div style={{ textAlign: 'center' }}>top</div>
            <div style={style}>
              <span style={spanStyle}>left</span>
              <span style={spanStyle}>right</span>
            </div>
            <div style={{ textAlign: 'center' }}>bottom</div>
          </div>
        </Scroller>
      </div>
    );
  }
}

export default BothDemo;
```

## API

> webkit 内核浏览器下将使用 ::-webkit-scrollbar 伪元素选择器 进行滚动条样式优化，非 webkit 内核浏览器使用组件内滚动条计算逻辑

### 基础参数说明：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| height | 受控高度 | number / string |  |  |
| direction | 滚动方向 | `v` \| `h` \| `both`(垂直滚动、横向滚动、同时双向滚动) |  | `v` |
| wrapStyle | 容器样式 | CSSProperties |  |  |
| wrapClass | 容器样式名 | string |  |  |
| viewStyle | 视图样式 | CSSProperties |  |  |
| viewClass | 视图样式名 | string |  |  |
| className | 自定义样式名 | string |  |  |
| style | 自定义样式 | CSSProperties |  |  |
| viewComponent | 渲染容器的标签 | string |  | `div` |
| onScroll | 滚动回调事件 | (e: any) => void |  |  |
