A waypoint set on the bottom of the scrollable page fires "onEnter" on top
See original GitHub issueI 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?
Issue Analytics
- State:
- Created 6 years ago
- Comments:7
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 likeI hope we’re able to find a solution to this!
Glad you got it working! Thanks for following up with your findings and for closing the ticket. 👍