无法使用 InfiniteScroll 和包 react-infinite-scroll-component 实现反向滚动分页答案

【问题标题】：Unable to implement reverse scroll pagination using InfiniteScroll with package react-infinite-scroll-component无法使用 InfiniteScroll 和包 react-infinite-scroll-component 实现反向滚动分页
【发布时间】：2021-05-18 14:35:30
【问题描述】：

大家好，我正在尝试使用 InfiniteScroll 和 react-infinite-scroll-component 包实现反向滚动分页，但无法这样做。正常向下滚动分页正在工作，但反向滚动是没有触发我在脚本中定义的方法 fetchMoreData2，即使没有显示错误。请指导我。

    <div
          id="scrollableDiv2"
          style={{
            height: 300,
            overflow: 'auto',
            display: 'flex',
            flexDirection: 'column-reverse',
          }}
          >


          <InfiniteScroll
          dataLength={this.state.listData.length} 
          next={this.fetchMoreData2}       

      
          scrollableTarget="scrollableDiv2"
          inverse={true}
          hasMore={true}
          style={{ display: 'flex', flexDirection: 'column-reverse' }}
      

          >
        <ul>
          {this.getList()}
      </ul>
   </InfiniteScroll>
</div>

【问题讨论】：

标签： reactjs infinite-scroll

【解决方案1】：

由于我没有得到任何指导或方法（我尝试使用它们的可用属性）来使用该包实现反向滚动分页，因此我在不使用该包的情况下以自定义方式实现了它。

**Putted this line in Constructor**:
 this.scrollRef = React.createRef();


**Putted the ref in the scrollable div inside render method**:
<div ref={this.scrollRef}>
//scrollable content
</div>

**Putted this line in componentDidMount method**:
this.scrollRef.current.addEventListener("scroll", this.scrollTrackFunc);


**Putted this line in componentDidUnMount method**:
this.scrollRef.current.removeEventListener("scroll", this.scrollTrackFunc);

**Added this method to track reverse scroll**:
scrollTrackFunc = () => {
      if (
        this.scrollRef!==null && this.scrollRef.current.scrollTop == 0
      ) {
   
        this.fetchData();
      }
    }

【讨论】：