A waypoint set on the bottom of the scrollable page fires "onEnter" on top

I have a scrollable <div> that is set to overflow-y: scroll. This <div> is recognized correctly as the scroll ancestor, and the height is reported as the viewport’s height (which is interesting; I would expect it to match its total size).

Inside this scrollable <div>, there are a couple of child <div>s that make the scrollable content, and the <Waypoint> comes right after these <div>s (but still in the container).

I would expect that the <Waypoint> fires onEnter once I scroll to the bottom. But on the contrary, onEnter is fired immediately (at the top), and if I scroll down, onLeave is fired. onEnter is fired again once I scroll up to the top.

If I look at the debug values, I can see that the waypoints’ top and bottom values are at 100 once I am at the top, and they become negative (!) once I scroll down.

What might cause this behaviour?

[trotzig]

If you inspect the DOM, can you find the <span> that the waypoint renders? It’s likely that it’s somewhere at the top. Since you’re using floats in your css, it might be enough to wrap the waypoint in something like

<div style={{ clear: 'both' }}>
  <Waypoint />
</div>

I hope we’re able to find a solution to this!

[trotzig]

Glad you got it working! Thanks for following up with your findings and for closing the ticket. 👍