Feature: Infinite Scroll in React

thank for sharing

I'm back to the video accidentally, this is the first series I follow along in your channel, Ben. Tks a lot. And I meet an issue with the `scrollTop` property in 2021. The value it returns is a negative number when I scroll to the top and hits 0 at the bottom. I'm not sure why but might be `column-reverse`. To fix it and check whether I hit the top I use the expression:

this.scroller.scrollHeight - Math.abs(this.scroller.scrollTop) === this.scroller.clientHeight ? "hit the top" : "scrolling..."

I know it's an old video but for those looking for infinite scrolling and data fetching but :
- It is better to use Promise / callback function for data fetching instead of a setTimeout, it will always wait for your function to catch the elements instead of waiting 100ms.
imagine if the user has connection issues, it will cause your app to crash in the worst case.
Great video nonetheless !! keep going

So you start at the bottom and scroll upwards to load more messages? Usually you scroll downwards. I guess it wouldn't be too hard to adjust the code to reverse it.

Is it normal to be getting a duplicate key warning at this point? Seems like the query is getting triggered more than once.

i'm putting the onscroll and ref on the root <div> of the render and still no console.log appears for the scrollTop

Hey,

I''m working on a chat app with infinite scroll too and this has been really helpful. I have run into an issue though that I haven't found an easy answer for. When I use
display: 'flex',
flexDirection: 'column-reverse',
overflowY: 'auto'
on my div that contains all the messages, it works great in chrome but on Firefox it doesn't have a scroll bar to scroll up at all. Do you have any ideas?

Hey Ben, quick question. When you define this.scroller = scroller , where exactly are you defining the variable scroller?

this.scroller.scrollTop values comes 0 only, not comes dynamic. please help.