CODEWITHSUNDEEP
javascriptreactjsecmascript-6
edmamerto
edmamerto

Reputation: 8155

How to determine elements scroll position in React

I am trying to implement an infinite scroll in my chat widget. I have a ref setup for chat body's container like this:

const containerNode = ReactDOM.findDOMNode(this.refs.container)

I also already setup an event listener that handle's the scroll:

containerNode.addEventListener('scroll', this.handleScroll);

I am now trying to find out how to implement the use case where before i can scroll up, it would make an ajax call.

handleScroll() {
    console.log("make an ajax call before it scrolls all the way up")
    if (some_conditon){
      //then load more!
    }
  }

enter image description here

Upvotes: 1

Views: 13043

Answers (1)

John Ruddell
John Ruddell

Reputation: 25842

Since you are scrolling up to the top all you need to do is look at the scroll top of your container.

const offset = 100 // 100 px before the request
if (containerNode.scrollTop < offset) {
    // request more here
}

SAMPLE FIDDLE

Upvotes: 4

Related Questions