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

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

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow edited Jan 31, 2019 at 15:40 Amirhossein Mehrvarzi 19k77 gold badges5050 silver badges7373 bronze badges asked Apr 6, 2017 at 22:08 edmamertoedmamerto 8,1551212 gold badges5353 silver badges8181 bronze badges 1

• Note, that there's a new way of creating references to a dom element: reactjs/docs/refs-and-the-dom.html – fraxture Commented Dec 26, 2017 at 16:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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