How to determine elements scroll position in React

Question

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

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

John Ruddell · Accepted Answer · 2017-04-06 22:38:12Z

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
}

answered Apr 6, 2017 at 22:14

John Ruddell

25.9k7 gold badges60 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1