5

I added some page transitions to my site. Now whenever someone clicks on the browser back button, that redirects him to his previous site, his scroll position on that page gets restored automatically. If the user has scrolled down on the previous page, this behavior leads to an ugly page jump in the current window less than a second before it fades out.

1) Am I able to delay this default browser behavior?

2) If 1 is not possible, am I able to disable the default behavior and store & restore scroll positions manually instead?

heroxav
  • 1,387
  • 1
  • 22
  • 65
  • Possible duplicate of https://stackoverflow.com/questions/7035331/prevent-automatic-browser-scroll-on-refresh/7035679#7035679. – djfdev Jan 19 '18 at 21:16
  • What browser do you use ? Im using Firefox and if i open some website e.g. https://www.thelocal.de/berlin scroll down to some news and open it, and from that news page if i press browser back browser displays scrolled to previous position from where i pressed on news, `it is default browser behaver - isn't it what you looking for ?` – Armen Jan 20 '18 at 07:38
  • @Armen No it is not what I want. Either I want to be able to control *when* this happens **or** I want to *disable* the behavior and do this on my own. But essentially, everything I want is control over when the browser does this as this effect does not play well with my animations. – heroxav Jan 20 '18 at 08:25
  • @djfdev None of the *solutions* proposed in the linked article appear to work for me. – heroxav Jan 20 '18 at 08:49
  • You can also set view height 100% of window with overflow hidden (disable scrollbar) before load and enable when you want, but I never tried.. – bigless Jan 20 '18 at 13:22
  • @jonhue What did you try? It worked perfectly for me .... see this gist https://gist.github.com/djfdev/36df0e9e96af8665ff57b8456957e49a – djfdev Jan 21 '18 at 05:49
  • @djfdev I did some more testing and it seems like `history.scrollRestauration = 'manual'` fixes the problem. I don't know how, though. – heroxav Jan 21 '18 at 11:52

1 Answers1

22

Although it is experimental, you can try adjusting the History scrollRestoration from "auto" to "manual".

There are a few polyfills out there to help with cross-browser compatability too.

if ('scrollRestoration' in history) {
  // Back off, browser, I got this...
  history.scrollRestoration = 'manual';
}
mootrichard
  • 3,581
  • 13
  • 25