react-list-scroll

中文文档

Usage

import Scroll from "react-list-scroll";
import List from "./list";
 
<Scroll>
    <List></List>
</Scroll>

Options

props.xxx

<Scroll
    disable={xxx}
    isEnd={xxx}
    loadDataForScroll={() => {}}
>
 
</Scroll>

• 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

// 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

// We use ref to store `Scroll` component in attribute.
<Scroll
	ref={(scrollEle) => {
		this.scrollEle = scrollEle;
	}}
>
</Scroll>

this.scrollEle.xxx

• prvScrollTop
  • position of last scroll

Caveat

• If there two list, please put them inside Scroll like this:

<Scroll>
	<List></List>
	<List></List>
</Scroll>

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 <Scroll> and recreate it. After componentWillMount is called, you can restore the position via prvScrollTop

Preact Version

import Scroll from 'react-list-scroll/pindex';