Back button scroll restoration not working about scroll-plugin HOT 19 CLOSED

As far as I know, there weren't any recent substantial changes to how or when the plugin resets the scroll position. Could be the specific combination of options in play here; animated history browsing is always a bit difficult to debug.

Could you provide a reproducible test case for us to look at? This CodeSandbox template is a good place to start.

from scroll-plugin.

Hey @daun thanks for the reply.

There seems to be an issue with that sandbox template, just went to fork it but getting the error:

_swup.default is not a constructor

Not entirely sure why as all dependencies look like they are being imported ok.

from scroll-plugin.

You're right. Not sure what's wrong there, we haven't touched that sandbox in forever. I'll look into it and get back to you.

from scroll-plugin.

We've pinned swup to v3.0.5 in the CodeSandbox template and it's compiling again, so that you can create your test case @matteightarms

from scroll-plugin.

Damn, sorry. I accidentally converted the sandbox to a cloud something. Now everything seems to be broken. Stay tuned! 😄

from scroll-plugin.

new starter template at https://codesandbox.io/s/swup-test-case-template-5dqcgs

from scroll-plugin.

@matteightarms Let us know if/when the update to the repro template allows you to create a reproducible test case.

from scroll-plugin.

@matteightarms Is this still an issue you‘re seeing?

from scroll-plugin.

hey @daun so sorry for the delay, got caught up on another project!

so if you head here:

https://codesandbox.io/s/swup-test-case-template-forked-5wrymv?file=/src/index.js

• Scroll half way down the homepage
• Click "page 1"
• Click the back button

You are now halfway down page 1 rather than at the top

If you navigate without the nav you are always taken to the top of the page, it just looks like the scroll plugin doesn't work when the back button is pressed?

Here is an older site that also uses swup and the scroll plugin (with the exact same settings) but the back button always transitions you back to the top of the page

https://sandpaperfilms.com/

from scroll-plugin.

What you are describing actually sounds like the expected behaviour. Swup implements the same scroll restoring logic as the browser. History navigation (back-/forward-buttons) restore the scroll position a page was at before it was left the last time.

from scroll-plugin.

I can't remember this plugin not restoring the scroll position on history navigation -- and if I did, I'd have considered it a bug. Let's find out at which version the behavior changed -- there might be a way of re-enabling the behavior you're after. Can you tell the version of swup and scroll-plugin used on the example page where it's working as expected?

from scroll-plugin.

Sure, I can absolutely see why you would want the default behaviour to restore scroll position.

On that older site site I'm using:

"@swup/body-class-plugin": "^1.0.1",
"@swup/scroll-plugin": "^1.0.6",
"swup": "^2.0.7"

Thanks.

from scroll-plugin.

Thanks @matteightarms for providing us with the versions! I created a test case using these versions:

https://codesandbox.io/s/swup-test-case-template-forked-vgg3nz

I can reproduce the described behaviour. It appears as soon as I set animateHistoryBrowsing to true. That behavior should be considered a bug in these versions of swup+scroll-plugin, and it's a good thing if it's fixed with the current versions.

I would still be open to discuss a new explicit option to disable scroll restoration for scroll-plugin. We should keep in mind though, that we don't have control over the scroll positions if animateHistoryBrowsing is set to false (the browser handles this scenario).

from scroll-plugin.

@hirasso Would the scroll option in the visit object solve this in the most recent swup version? Can't test this at the moment, but in my mind this should work:

// Scroll to top on history visits
swup.hooks.on('visit:start', (visit) => {
  if (visit.history.popstate) {
    visit.scroll.target = '#top';
  }
});

from scroll-plugin.

Adding an option restoreHistoryScrollPosition would be another way to handle this inside of Scroll Plugin.

from scroll-plugin.

@hirasso Would the scroll option in the visit object solve this in the most recent swup version? Can't test this at the moment, but in my mind this should work:

It should, indeed! I'm AFK now as well, but if you'd like to give it a go @matteightarms that would be great.

For what it's worth, scroll restoration was introduced here: https://github.com/swup/scroll-plugin/releases/tag/1.3.0

from scroll-plugin.

@matteightarms I've re-tested a few scenarios on swup 4 regarding scroll restoration on history visits and found two issues we've fixed in the latest 4.3.1 release. Since you're disabling the scroll animations in the scroll plugin anyway, I think you actually don't need the plugin as long as you're on swup 4. The example hook above may or may not be required, depending on your specific use case.

from scroll-plugin.

@matteightarms We've extensively tested the Scroll Plugin with animated history visits and animated scrolling and fixed a few issues along the way. If you install the latest swup release along with the latest Scroll Plugin release, you should find the above example hook to correctly make swup scroll to the top for all history visits, disregarding any stored scroll positions.

from scroll-plugin.

hey @daun thank you so much, I will give this a go today and let you know any issues. Appreciate how quickly you all looked into this.

from scroll-plugin.