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以了解如何比较上一个和当前滚动位置。