scroll restoration problem with scrollsmoother + pinning

[Amir Mohammad]

Hi everyone.

I am having a problem with my scroll restoration when it comes to using scrollSmoother and pinning a section (diagonal-carousel).

Whenever I refresh the page anywhere in the diagonal carousel and below, the scroller loses its position and restores it at the beginning of the carousel.

See the Pen ByzPRPw by mamadtahsiri (@mamadtahsiri) on CodePen.

[GreenSock]

That's because when the page loads and the browser tries to restore the scroll position, the page is still short (it fires before ScrollTrigger makes the page longer for pinning), so it can only scroll as far as the original content's height. You could record the scroll position and restore it manually on refresh like this: 

 

const SCROLL_KEY = `scroll:${location.pathname}${location.search}`;
window.addEventListener('pagehide', () => sessionStorage.setItem(SCROLL_KEY, window.scrollY + ""));
ScrollTrigger.addEventListener("refresh", restoreScroll);
function restoreScroll() {
  const y = +sessionStorage.getItem(SCROLL_KEY);
  if (!y || y < 0) return;
  if ('scrollRestoration' in history) history.scrollRestoration = 'manual'; // Prefer manual restoration so the browser doesn't fight us
  window.scrollTo(0, y);
}

Here it is in your demo: 

See the Pen YPWmgMr?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Does that work well for you? 

[Amir Mohammad]

Thank you!