Feature Idea: Restore overflowing div's scroll position on popstate

[hirasso]

Some of the sites I build make heavy use of overflowing divs. A good example where I used my own home-grown swup-like library: https://junge-akademie.adk.de/en/

Underneath the large teaser on the front page, two large overflowing divs scroll into view. Now if you scroll one or both of these divs down a bit, then navigate to one of the links and go back to the front page through the browsers back button, the div's previous scroll positions get restored automatically.

I would love to have this kind of feature available in swup, as well. Maybe the scroll plugin would be a good place to implement this? If you agree, I would try to implement it.

In the above example, I added a custom attribute [data-scrollable-id] to the overflowing divs, cached their scroll position and restored it on popstate. For swup, I could imagine an attribute like [data-swup-restore-scroll] and detecting popstate navigation on contentReplaced, which has an argument popstate for detecting navigation through the history API.

Before creating this issue, did you think of...:

• Have you checked closed issues for similar/related problems.
• Have you provided all helpful information available?
• Have you considered creating a demo so we can help you better?

[daun]

There's a third-party Preserve Scroll Plugin that's pretty close in spirit. That might be a good fit for that functionality; not sure how much of it it already covers. I worry a bit that supporting arbitrary numbers of other scroll containers will end up making the plugin rather complex. Not sure how @gmrchk thinks about this?

[daun]

Oops, didn't mean to close.

[hirasso]

Thanks for the pointer to Preserve Scroll Plugin! Yes, at first I thought this plugin would exactly solve my needs – until I found out that it doesn't... 🤖 ...adding my proposed feature to said plugin would be pretty confusing for users, I imagine, since the two features sound so similar, but are so different.

With PreserveScrollPlugin out of the race, I see three alternatives:

1. Add the functionality to ScrollPlugin (my favorite. Based on the plugin's name I would expect it to handle all scroll-related stuff)
2. Create a new plugin called "RestoreScrollPlugin" or "CacheScrollPlugin"
   • con: could easily be confused with "PreserveScrollPlugin" or "ScrollPlugin")
   • con: one more plugin
3. Incorporate this into swup's core

We should probably think about also taking care of restoring the scroll position on the window if animateHistoryBrowsing is set to true, as described here

I am not too worried about the complexity. Maybe I could just try to implement it in scroll-plugin and then we could decide together if it became too complex?

[daun]

Makes sense! I haven't tried the plugin myself. In that case, I like your suggestion of implementing it for the scroll plugin and then deciding if it feels right to include. Let's do that!

[daun]

I've never used animateHistoryBrowsing — does that mean the scroll position isn't restored on back/forward? In that case, we should definitely have this on the radar.

[hirasso]

I haven't and probably neither will ever use animateHistoryBrowsing, either. But that's what it says in the docs. The scroll position isn't being restored automatically. @gmrchk , maybe you could explain to us, what your reasoning was behind leaving the implementation of the scroll restoration to the end users of swup?

[hirasso]

I implemented the described logic for automatically storing and restoring the scroll positions. Looking forward to hear what you think! :)

One thing I noticed: My editor (VS Code) keeps messing up the indentation of your source code. Do you have an .editorconfig that you would care to add to the repo? I have also been trying to let npx prettier --write . do it's thing, but it doesn't correctly indent the code, either 🤷‍♂️

[daun]

The indentation is working fine in VSCode for me, must be some setting I've forgotten about long ago 🤠

[daun]

But yes, can you create an issue for the .editorconfig? I'll see if I can cobble it together from the prettier config.

[gmrchk]

I basically couldn't tell what's the best way for handling such scenario, since I wouldn't use it myself, so I didn't implement it at all.
animateHistoryBrowsing is this things that was widely requested, but I kinda regret. 😄
I used Swup to animate transitions, but I always felt that once user goes back in history, they want to get exactly where they were quickly. That's why the transitions are by default disabled for history jumps. This is also handy because the scroll position is automatically handled by browser just like it would without Swup.
However, many people requested to have option to animate transitions on back/forward navigation also, so the option was added. The problem with that is that you likely don't want the browser to simply (natively) jump to the previous position right away during animation. We suddenly need to handle possibly complex logic of when and where to scroll - Should it scroll right away? Should it go all the way to the top, or previous cached position? Should it animate the scroll? That's why I opted to not handle it at all, and let user implement their own behaviour on Swup events, possibly using Swups scroll animation.