Jump to content
GreenSock

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

ScrollSmoother + Gatsby — First click instantly scrolls to top of page

Go to solution Solved by RJWadley,

Recommended Posts

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:

  1. Reload the page
  2. Scroll down a bit
  3. Click anywhere (any mouse button)

 

 

Link to comment
Share on other sites

Welcome to the forums @RJWadley

 

I haven't seen that before, and Gatsby is acting up for me on CodeSandbox. React frameworks that do SSR on CodeSandbox are just buggy sometimes. Can you try to make a simplified version of that using only React so we can at least narrow it down to React or Gatsby? And maybe also test out using version 17 of React. Thanks!

Link to comment
Share on other sites

  • Solution

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> //
  );
}

 

 

Link to comment
Share on other sites

Oh, I think I see the problem now. Gatsby is wrapping everything in a focusable element. That is why I recommended to try it without Gatsby to make it easier to narrow the problem down.

https://github.com/gatsbyjs/gatsby/issues/7310

 

So now I can reproduce the issue in vanilla html. We'll need to investigate if this is something ScrollSmoother can resolve.

 

See the Pen KKQpROm by GreenSock (@GreenSock) on CodePen

 

 

Link to comment
Share on other sites

  • 2 weeks later...

Hi there!

Encountered the same issue and just wanted to ask when the workaround will be rolled out. For me it's only happening on a right mouse click tho.

 

Best,

Link to comment
Share on other sites

We're still working on several enhancements, so I cannot give you a specific date, sorry. However, I'd be happy to send you the unprotected beta file if you need that for your project - just Direct Message me. 

  • Like 1
Link to comment
Share on other sites

Awesome! Thanks a lot.

I also tried around targeting the gatsby wrapper directly but it might cause some other issues down the road. So happy to include the beta file into the project. I've sent you a message.

 

 
React.useLayoutEffect(() => {
	ScrollSmoother.create({
	wrapper: '#gatsby-focus-wrapper',
	content: '#smooth-content',
	smooth: 1
	});
}, []);

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×