https://github.com/steamerjs/react-list-scroll
react 滚动加载组件
https://github.com/steamerjs/react-list-scroll
component react scroll scrolling
Last synced: 12 months ago
JSON representation
react 滚动加载组件
- Host: GitHub
- URL: https://github.com/steamerjs/react-list-scroll
- Owner: steamerjs
- License: mit
- Created: 2017-03-03T07:38:34.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-12-24T12:00:43.000Z (over 7 years ago)
- Last Synced: 2025-06-14T10:49:53.092Z (about 1 year ago)
- Topics: component, react, scroll, scrolling
- Language: JavaScript
- Size: 417 KB
- Stars: 10
- Watchers: 6
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## react-list-scroll
[中文文档](/README_ZH.md)
### Usage
```javascript
import Scroll from "react-list-scroll";
import List from "./list";
```
### Options
#### `props.xxx`
```javascript
{}}
>
```
* disable
- disable scroll event
* useWindow
- use `window` as the scroll container, default `false`
* scrollContainer
- user-defined scroll container, you can pass an HTML element
* scrollStyle
- style of scroll component
* className
- className of scroll component
* scrollPoint
- user customized point to trigger loadDataForScroll
```javascript
// this is the logic for comparison
scrollTop > this.props.scrollPoint
```
* isHalf
- scroll to half and trigger loadDataForScroll
* isEnd
- the list reaches the end
* loadDataForScroll
- callback passed from parent component
#### `this.scrollEle.xxx`
```javascript
// We use ref to store `Scroll` component in attribute.
{
this.scrollEle = scrollEle;
}}
>
this.scrollEle.xxx
```
* prvScrollTop
- position of last scroll
### Caveat
* If there two list, please put them inside Scroll like this:
```javascript
```
If your two-list scrolling is using block and none to display, please put your restoring scrolling position logic inside your switching tab logic.
If your two-list scrolling requires destruction of another list, you can destroy `` and recreate it. After componentWillMount is called, you can restore the position via prvScrollTop
### Preact Version
```javascript
import Scroll from 'react-list-scroll/pindex';
```