Detect Scrolling Position in a DIV using Javascript and React

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;
 }

This is what i have done, but it keeps making api calls even when i scroll up or down..

How Can i detect scrolling in that div such that scrolling up will not make api calls, but scrolling down will make api call only when a certian height has been reached, i cannot be scolling down and be making api calls all the time..

Any help please

are you looking for some infinite scroll thing? – chintuyadavsara Dec 13 '19 at 10:32 — chintuyadavsara, Dec 13 '19 at 10:32
Yeah, something like that. – Precious Uchendu Dec 13 '19 at 10:40 — Precious Uchendu, Dec 13 '19 at 10:40

Emmanuel Meric de Bellefon · Accepted Answer · 2019-12-13T10:50:28.120

It seems that the DOM doesn't provide a builtin way to distinguish between scroll down and scroll up events.

So, the only way is to store the previous scroll position, then compare it to the new one and you can know if it is a scroll up or a scroll down.

Also, in React, the best way should be to store such a value as a property directly :

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

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

You can refer to this to see how to compare previous and current scroll positions.

Detect Scrolling Position in a DIV using Javascript and React

1 Answers1