react-waypoint: onPositionChange, onEnter and onLeave fire once on page load, and won't fire again until reload

I am using Waypoint to track whether a header has left the top of the viewport.

When a page is loaded (using Gatsbyjs’s wrapper for react-router’s Link component) onPositionChange, onEnter and onLeave are all fired at once (checked by using them to log a string to console), and then are never fired again when the page is scrolled. They are only fired again when I navigate to a different page, and they all fire at once again and the process repeats.

The debug output shows that waypoints of the child div are being tracked, and correctly identify when the div has left the viewport.

Despite this, none of the functions are triggering on scroll - I’m not sure if this is connected to react-router similar to #249

About this issue

Original URL
State: open
Created 6 years ago
Reactions: 2
Comments: 19 (1 by maintainers)

Most upvoted comments

I had a similar issue and the issue was coming from the gatsby-plugin-transition-link The plugin was adding an overflow-x:hidden, adding this to my styles fixed the issue.

.tl-edges {
  overflow-x: initial;
}

alfred-pb on Feb 19, 2020

I’m experiencing the same issue above with Gatsby. If I wrap a block or place the following element in any of my components, every hook fires on initial page load and then nothing. Debug shows all the output as expected.

  <Waypoint 
    scrollableAncestor='window' 
    onPositionChange={console.log("changed")} 
    onEnter={console.log("enter")} 
    onLeave={console.log("leave")}
/>

ehubbell on Feb 10, 2021

I found having parent component style be overflow: 'auto' caused this problem

jhclaura on Oct 14, 2021