Comments (19)
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
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.
Related Issues (15)
- animateScroll doesn't seem to work HOT 6
- Scrolls to incorrect position on Firefox when using anchor link HOT 2
- Feature Idea: more fine-grained options for animateScroll HOT 3
- Feature Idea: Restore overflowing div's scroll position on popstate HOT 14
- Disable smooth scroll for certain links HOT 11
- `swup.scrollTo()` method needs review HOT 4
- Scroll control of elements on page HOT 3
- Add `ignore` option HOT 11
- Emulate `:target` to allow styling anchor element
- Make `shouldResetScrollPosition` work for non-link requests HOT 1
- A11y: allow disabling animated scroll from visit object HOT 1
- Scroll options not applied correctly HOT 1
- I'm not even sure if this is a issue, but I need help HOT 1
- [Bug]: Visit object `visit.from.url` and `visit.to.url` values incorrect on `scroll:end` lifecycle HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from scroll-plugin.