无法使用带有包 react-infinite-scroll-component 的 InfiniteScroll 实现反向滚动分页

Question

大家好，我正在尝试使用带有包 react-infinite-scroll-component 的 InfiniteScroll 来实现反向滚动分页，但无法这样做。正常向下滚动分页有效，但反向滚动有效即使没有显示错误，也不会触发我在脚本中定义的方法 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>

Answer 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();
      }
    }

无法使用带有包 react-infinite-scroll-component 的 InfiniteScroll 实现反向滚动分页

Unable to implement reverse scroll pagination using InfiniteScroll with package react-infinite-scroll-component

reactjs

infinite-scroll