react-waypoint: Bug on scrolling to top

I have list of numbered items. Waypoint seted up like this

  <Waypoint onEnter={ props.onEnter.bind(null, props.place) } bottomOffset="70%" topOffset="10%">
    <div><Card {...props} /></div>
  </Waypoint>

...

onEnterHandler(e) {
    console.log(e.number)
}

When I scroll from top to bottom I see (in console)

But when scroll from bottom to top

PS you need to scroll really fast to reproduce bug

I will try to craft example. Is this known thing? Or I did something strange to waypoint.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 25

Most upvoted comments

As I said this is a hack, not a full featured solution. It totally works in my case (fixes the bug), but it comes with drawbacks:

it is guaranteed that when the user stops scrolling they will get proper state of application
but it is not guaranteed that intermediate events will be fired in proper order

How it works:

detect direction of scrolling with the help of event listener, previous position and current position
if it goes bottom - store max number of item in the list as current item. Values should increase if you scroll down.
if it goes up - store min number of item in the list as current item. Values should decrease if you scroll up.

Current item is the outcome of this hack. This is exactly what you need for scrollspy. But events are still fired in the wrong order.

More general solution, which can be incorporated in the lib would require to buffer events if they are in wrong order and then fire them in proper order. To do this we will need to introduce debounce function, which will introduce some latency in event firing process. So the question if this the solution which you expect and will accept?

stereobooster on Jul 19, 2018