javascript - 使用 Javascript 和 React 检测 DIV 中的滚动位置

Question

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 调用 当达到一定的高度时，我不能一直低头并一直在进行 api 调用..

请帮忙

Answer 1

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

所以，唯一的办法就是存储之前的滚动位置，然后将它与新的滚动位置进行比较，就可以知道是向上滚动还是向下滚动。

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

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

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

可以引用this查看如何比较之前和当前的滚动位置。