search

karl-run / react-bottom-scroll-listener

A simple listener component that invokes a callback when the webpage is scrolled to the bottom.
https://karl-run.github.io/react-bottom-scroll-listener
149 stars 15 forks source link

Listener for "Scroll To Top" event. #50

Closed imAunAbbas closed 2 years ago

imAunAbbas commented 3 years ago

Hi,

I'm working on a chat module in which chat messages are shown in reverse sequence. So all new messages will come to the bottom and by default, the app will focus on the new message. For the older messages, I want to use pagination so that I shouldn't call the function to fetch all the messages at once, instead I wanna use a limit. Whenever I scroll to the top and listener will call for the previous messages that are not being fetched yet.

For this purpose, I want to listen when the scroll is reached to the top. Is there any way of using this library for my purpose? Thanks in advance.

karl-run commented 3 years ago

This library mostly abstracts away some of the math you need to do for calculating when the scroll has hit the bottom. If you are interested in knowing when the scroll has reached the top, you only need to see if node.scrollTop is 0. Just attach a yourNodeRef.addEventListener('scroll', yourScrollCallBack); and you should achieve what you want. :)