# reactjs-scroll

> This is a react component for scroll.

Latest version **0.6.4** (published 2017-09-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactjs-scroll
pnpm add reactjs-scroll
yarn add reactjs-scroll
bun add reactjs-scroll
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.4 |
| Published | 2017-09-26 |
| First published | 2016-08-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=4.0.0 |
| Dependencies | 6 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Linder Wang |
| Maintainers | linder0209 |
| Keywords | react, scroll, component |

## Links

- npm: https://www.npmjs.com/package/reactjs-scroll
- Repository: https://github.com/reactjs-ui/reactjs-scroll
- Homepage: https://github.com/reactjs-ui/reactjs-scroll#readme
- Issues: https://github.com/reactjs-ui/reactjs-scroll/issues
- npm.io page: https://npm.io/package/reactjs-scroll

## Dependencies (6)

- [debounce](https://npm.io/package/debounce.md) ^1.0.2
- [throttleit](https://npm.io/package/throttleit.md) ^1.0.0
- [perfect-dom](https://npm.io/package/perfect-dom.md) ^0.1.2
- [component-raf](https://npm.io/package/component-raf.md) ^1.2.0
- [component-tween](https://npm.io/package/component-tween.md) ^1.2.0
- [mouse-wheel-event](https://npm.io/package/mouse-wheel-event.md) ^1.2.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.6.4 (latest) — 2017-09-26
- 0.6.3 — 2017-09-24
- 0.6.2 — 2017-09-24
- 0.6.0 — 2017-09-22
- 0.5.1 — 2017-09-20
- 0.5.0 — 2017-04-26
- 0.4.1 — 2016-08-24
- 0.2.0 — 2016-08-09
- 0.1.0 — 2016-08-02

## README

# reactjs-scroll

This is a react component for scroll.

## Install

```
npm install reactjs-scroll --save
```

## Example

```
npm install
gulp example
```

http://localhost:9090


## Online Example

http://reactjs-ui.github.io/reactjs-scroll/

## Build Example
第一次需要先执行前两步操作，再执行第三步。以后修改例子后，只需要执行第三步即可

* 创建 gh-pages 分支，**在执行 git subtree add 命令之前，需确保 gh-pages 分支下至少存在一个文件**
```
git branch gh-pages
git checkout gh-pages
rm -rf *     //隐藏文件需要单独删除，结合命令 ls -a
git add -A
git commit -m "clear gh-page"
git push --set-upstream origin gh-pages
vim README.md
//输入一些内容
git add README.md
git commit -m "README.md"
git push
git checkout master
```

* 把分支 gh-pages 添加到本地 subtree 中，执行该命令前，请确保 examples-dist 文件夹不存在

```
git subtree add --prefix=examples-dist origin gh-pages --squash
```
  
* 生成在线 examples
```
gulp example:build
git add -A examples-dist
git commit -m "Update online examples"
git subtree push --prefix=examples-dist origin gh-pages --squash
git push
```

## Usage

```javascript
import React, {Component} from 'react';
import {render} from 'react-dom';
import Scroll from 'reactjs-scroll';
import 'reactjs-scroll/sass/scroll.scss';
// 或者 import 'reactjs-scroll/styles/scroll.css';
// 自定义样式
import './sass/example.scss';

class ScrollSimple extends Component {
  render() {
    let contents = [];
    for (let i = 0; i < 100; i++) {
      contents.push(<p key={i}>这里放置真实显示的DOM内容 {i}</p>);
    }
    const props = {
      scrollBar: true,
      maxAmplitude: 80,
      debounceTime: 30,
      throttleTime: 100,
      deceleration: 0.001,
      scrollSpeed: 10,
      durationSpeed: 3,
      disableBounceTop: false,
      disableBounceBottom: false,
      className: 'example-scroll'
    };

    return (
      <Scroll {...props}>
        <div>
          {contents.map((item) => {
            return item;
          })}
        </div>
      </Scroll>
    );
  }
}

render(
  <ScrollSimple/>, document.getElementById('layout')
);

```

## Options

| 选项        | 类型   |  功能  |
| --------   | ----- | ---- |
| className | PropTypes.string| 自定义样式|
| children | PropTypes.node| 待渲染的内容|
| scrollBar | PropTypes.bool| 是否显示滚动条|
| barClassName | PropTypes.string| 自定义 bar 样式|
| maxAmplitude | PropTypes.number| 设置上下滑动最大弹性振幅度，单位为像素，默认为 80 像素|
| debounceTime | PropTypes.number| 设置防抖时间|
| throttleTime | PropTypes.number| 设置滑动条移动频率，值越大，移动的越缓慢|
| deceleration | PropTypes.number| 设置弹性滑动持续时间，即滑动停止时，弹性持续的时间，值越大，持续时间越短|
| scrollSpeed   | PropTypes.number | 设置滚动加速度，值越大，滚动越快 |
| thresholdOffset | PropTypes.number | 设置上下移动临界值，移动超过该值，则向上或向下滑动 |
| durationSpeed | PropTypes.number | 滑动持续时间系数，系数越大，持续的时间短 |
| easing  | PropTypes.string | 设置加速方式，默认为匀速，详情查看 https://github.com/component/ease |
| disableBounceTop  | PropTypes.bool | 是否禁用顶部弹跳，当页面到达最上面时，触发 touch 事件阻止向下滑动 |
| disableBounceBottom  | PropTypes.bool | 是否禁用底部弹跳，当页面到达最下面时，触发 touch 事件阻止向上滑动 |

## Build

```
npm run build
```

## Publish

```
gulp publish
```

## More React Component

* [reactjs-pull-refresh](https://www.npmjs.com/package/reactjs-pull-refresh) 

## Issue

https://github.com/reactjs-ui/reactjs-scroll/issues

## Version

Please view [here](./CHANGELOG.md)

---
_Source: https://npm.io/package/reactjs-scroll · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._