How to reverse infinity scroller in reactjs

Question

I'm creating a chat panel in which I want that on scroll up of the messages div older messages will come and append with the other messages. I also scrolling messages div to the bottom of its height when messages load for the first time to show the latest messages like a chat application. I have tried to react module for this but no success in this. the module which I have used is "react-infinite-scroller". it has the "isReverse" option but it didn't work. So, anybody can tell me how can I achieve the above goal using any react module or can also using only javascript code(by manually implementing reverse scrolling functionality).

Answer 1

You can you use React Visibikity Sensor

 const VisibilitySensor = require('react-visibility-sensor'); <VisibilitySensor onChange={onChange}> <div>...content goes here...</div> </VisibilitySensor>

You can put this sensor top of your div which contains your messages now if you reach top then you can handle isVisible or not and now you can add fetchmore call to fetch more messages