react scroll for list
npm install react-list-scrolljavascript
import Scroll from "react-list-scroll";
import List from "./list";
`$3
####
props.xxx`javascript
disable={xxx}
isEnd={xxx}
loadDataForScroll={() => {}}
>
`
* 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.
ref={(scrollEle) => {
this.scrollEle = scrollEle;
}}
>
this.scrollEle.xxx
`* prvScrollTop
- position of last scroll
$3
* 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$3
`javascript
import Scroll from 'react-list-scroll/pindex';
``