Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

RJWadley

Members
  • Posts

    2
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

RJWadley's Achievements

  1. I was easily able to reproduce the issue with React 17, although I wasn't able to recreate it using only React. And although I wasn't able to determine any causes, I was able to find a solution. I'll drop it here in case anybody encounters the same issue. I discovered that the issue only occurs if I explicitly create a smooth-wrapper and smooth-content like so: () => { SmoothScroller.create() //this doesn't work return ( <div id="smooth-wrapper"> <div id="smooth-content">{children}</div> </div> // ); //if I remove the explicitly created wrappers, this would work fine //but we would lose control of fixed elements (since they'd no longer be outside the wrapper) return children; } To fix the issue, I moved the ScrollSmoother.create() into gatsby-browser while leaving the smooth-wrapper and smooth-content in place. This fixes the jumping while retaining control of fixed elements, however the scroller won't always be up-to-date with the wrapper and therefore sometimes just won't scroll. This can be resolved pretty easily by adding a useEffect that refreshes the scroller anytime the scroll component updates. That leaves the final solution as follows: //in gatsby-browser SmoothScroller.create() //in Scroll component () => { useEffect(() => { SmoothScroller.get().refresh() }) return ( <div id="smooth-wrapper"> <div id="smooth-content">{children}</div> </div> // ); }
  2. So I'm using Gatsby with ScrollSmoother, and the first time you click the page, it instantly scrolls to the top (without any easing). This only happens on the very first click after loading the page. Does anybody have any insight into why this might be happening? I've created a minimal demo of the issue at: https://codesandbox.io/s/beautiful-wind-yn4yyt?file=/src/components/Scroll.tsx To reproduce: Reload the page Scroll down a bit Click anywhere (any mouse button)
×