this.state = {
    page: 1
}

onScroll = () =>{
    let elem = document.getElementById("longTable");
    let loading = true // this can change depening on if an api call is in progress
    if ((elem.offsetHeight + elem.scrollTop) >= elem.offsetHeight - 10 &&!loading ) {
     this.setState(prevState => ({ page: prevState.page + 1 }), () =>
     console.log("Now You can Scroll")
    //    this.props.onLoadMore(this.state.page)
    )
    }else{
    //   debugger;
     console.log("finally--- no more api calls")
    }
    }


<div
  className={"long-table"}
  id={"longTable"}
  onScroll={this.onScroll}
  style={{ width: "-webkit-fill-available" }}
>
</div>;


.long-table {
  overflow-y: auto;
  height: 600px;
 }


这是我所做的,但是即使我向上或向下滚动,它仍会继续进行api调用。

我如何才能检测到该div中的滚动,使得向上滚动不会进行api调用,但是向下滚动只会进行api调用
当达到certian高度时,我无法一直向下滑动并一直进行api调用。

任何帮助请

最佳答案

似乎DOM没有提供一种内置的方式来区分向下滚动和向上滚动事件。

因此,唯一的方法是存储上一个滚动位置,然后将其与新滚动位置进行比较,您可以知道它是向上滚动还是向下滚动。

另外,在React中,最好的方法应该是将这样的值直接存储为属性:

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.lastScrollTopPosition = 0
  }

  onScroll() {
    /* ... */
  }
}


您可以参考this以了解如何比较上一个和当前滚动位置。

10-05 20:42
查看更多