Wednesday, 31 March 2021

React scroll to bottom only works for the first time (demo inside)

I have a react project where I am trying to implement infinite scroll, But not sure why it detects bottom only once, from next time onwards there is always 1 pixels difference in values so it never matches with element.clientHeight

Below is code that I am using to detect scroll to bottom

Math.ceil(element.scrollHeight - element.scrollTop) === element.clientHeight

Going forward I actually want to fire axios call 200 pixels before it reached to bottom so In the mean time I can fetch the data and append to bottom so user never have to wait for data to load.

I have created demo repo which has the same issue as my project CodeSandbox demo



from React scroll to bottom only works for the first time (demo inside)

No comments:

Post a Comment