Store and restore scroll positions #26

hirasso · 2022-08-08T09:04:51Z

As described in #24 :

Store the current scroll positions of the window and all elements matching the selector [data-swup-scroll-container] for the previousUrl on willReplaceContent
Restore the stored scroll positions on contentReplaced. Also takes care of restoring the window's scroll position, if swup's option animateHistoryBrowsing is set to true.
on clickLink, reset the scroll positions for the URL the link points towards.
- allow to opt-out from resetting scroll positions for a link using the option skipDeletingScrollPositions

…ink` If a user only navigates using the browser's back and forward buttons and scrolls the window and/or some divs in between, the scroll positions will now also be updated.

daun · 2022-08-08T09:48:52Z

src/index.js

+        return;
+      }
+      // cycle through all elements on the current page and restore their scroll positions, if appropriate
+      const $elements = document.querySelectorAll('[data-swup-restore-scroll]');


I'd use the queryAll helper here, it converts the NodeList to an array which I think Safari still has problems with.

Oops really? Do you have a source describing the Safari issue? If so, I have been building a lot of broken websites in the last few years 😅

Mmh. Officially it's supported from Safari 10, so that should never have been an issue. Maybe I'm misremembering and it was Edge? It definitely was an issue as recently as 1/2 years ago, even with Babel.

As far as I know, we should be fine

Do you know how I could actually access swups queryAll helper function from the plugin? I don't really care, would just as well use that instead of querySelectorAll, if I would have access to it ;)

daun · 2022-08-08T09:51:06Z

src/index.js

+    }
+
+    onClickLink = (e) => {
+        this.deleteStoredScrollPositions(e.delegateTarget.href);


Why do we have to delete the scroll position on link click?

Automatically Restoring the scroll position should only be done while navigating the history. Otherwise, it should be 0, just like the browser does it. Maybe we could introduce another attribute here, something like [data-swup-history-link] or the like. Then we could preserve the scroll positions for links matching this attribute.

The link would then basically behave for scroll positions like a link with href="javascript:history.back()".

Ah yes, makes sense.

I don't think we need an attr for changing the behavior, though, it should be fine the way it is.

I just remembered a few cases I had in the past, where clients wanted to go back to a list of posts from a detail page, and the browser back button wasn't enough for them. So we do need a solution for that IMO. This is what I came up with: d10f95d

The new option behaves just like swup's own option skipPopstateHandling and could be used like this, for example:

{ skipDeletingScrollPositions: linkElement => { return linkElement.classList.contains('backlink') // don't delete the scroll positions for link elements with the class "backlink" } }

daun · 2022-08-08T09:52:47Z

src/index.js

+        elements: []
+      }
+      // fill up the object with scroll positions for each matching element
+      const $elements = document.querySelectorAll('[data-swup-restore-scroll]');


Can we make the selector configurable? We could also exit early here if a normal query returns null and skip the forEach.

Yes, I'll add the option for the selector. Right now, this really is just a POC to see what you think. Could you take it for a spin in some little test project?

We could also exit early here if a normal query returns null and skip the forEach.

querySelectorAll always returns a list, so no need to detect null and bail early here.

Added scrollContainersSelector to the options.

daun · 2022-08-08T10:18:32Z

I'll take it for a spin later or tomorrow!

Allows to skip the deletion of scroll positions on `clickLink`, based on a callback.

hirasso · 2022-08-08T19:34:12Z

Just a heads-up, this are the new options in this PR:

{
  scrollContainersSelector: `[data-swup-scroll-container]`,
  skipDeletingScrollPositions: linkElement => {
    return linkElement.classList.contains('backlink') // don't delete the scroll positions for link elements with the class "backlink"
  }
}

hirasso · 2022-08-09T15:11:59Z

I have uploaded a test site for this feature to my server:

https://test.rassohilber.com/swup-scroll-plugin/test/

How to test:

Scroll the bordered div down a bit
Navigate to "Projects" or "About"
Navigate back using the browser's back-button or the link underneath the box

The bordered div's scroll position should be restored.

If you change the option animateHistoryBrowsing through the console and repeat above steps, the window's scroll position also gets restored automatically:

swup.options.animateHistoryBrowsing = true

daun · 2022-08-11T19:59:40Z

Looking really good! I've had a few questions/suggestions I just haven't come around to write up properly, I'll try and get to it tomorrow.

daun · 2022-08-11T22:26:23Z

Working really well, I can see this being super useful in future projects!

A few thoughts:

The selector option name could be simpler, how about simply scrollContainers, in keeping with swup’s selectors option?
I’m not a fan of having the window and the scroll containers be separate concepts. If we have a single selector like html, [data-scroll-container], we can treat them all the same and it’ll be easier to add new features across all scroll containers, e.g. allow anchor-scrolling in other containers than the window as well
- That way, one could theoretically disable all scrolling on the window by passing a custom selector without html
- We’d need to check in the loop of storeScrollPositions if the element is html or another one, and then change where we get/set the position from (window.scrollY or el.scrollTop). Just like you’re doing now, but at a different point in time.
The name of the option skipDeletingScrollPositions is confusing, users don’t know about the internals and the deleting part. How about the other way around: restoreScrollPosition(link) => true? In that case, we can extend the function in the future to include e.g. the container itself and allow customizing by link and container.

Let me know if you need help with the docs, happy to help with that.

hirasso · 2022-08-12T08:26:54Z

Thanks for your great feedback!

The selector option name could be simpler, how about simply scrollContainers, in keeping with swup’s selectors option?

You mean in keeping with swup's containers option, right? If so, makes sense.

I’m not a fan of having the window and the scroll containers be separate concepts. If we have a single selector like html, [data-scroll-container], we can treat them all the same and it’ll be easier to add new features across all scroll containers, e.g. allow anchor-scrolling in other containers than the window as well

Great idea! One thing to keep in mind: If we do that and handle window and custom elements the same, the automatic scroll restoration should never be animated (technical limitations in gmrchk/scrl, it only supports the window and only scrollTop). It shouldn't be animated, anyways, IMO. We will still have to decide, what we would want to do in the case of animateHistoryBrowsing = true, but we can probably take care of this later.

The name of the option skipDeletingScrollPositions is confusing, users don’t know about the internals and the deleting part. How about the other way around: restoreScrollPosition(link) => true?

😄 I was actually going back and forth with the naming of this option, couldn't decide. Will use yours, instead. Also, the singular (restoreScrollPosition, not restoreScrollPositions) feels more natural, since the consumers probably won't care about how many elements have to be treated to restore the previous scroll position.

In that case, we can extend the function in the future to include e.g. the container itself and allow customizing by link and container.

Sounds interesting, looking forward to hear what you are imagining.

- Remove duplicate code - Avoid unreachable else-statements - Introduce guard clauses - Rename new options

hirasso · 2022-08-17T15:36:16Z

@daun after our chat I did some more work here. The main two features:

renamed the plugin options
handeled a possibly stored window scroll position on forward navigation (clickLink)

To bring some sanity to this update, I did some major cleanup and refactoring in the code. That's why it looks like I have changed a lot, but I haven't, really :)

Happy to walk you through in another call!

The above test site has been updated with the newest version.

daun · 2022-08-17T17:31:55Z

Looks great and works great, too. The code now is super logical. Is the functionality feature/finalized on your part, i.e ready to merge?

I have two minor nitpicks I'll add as comments, but this is great work! Looking forward to have this in the plugin 🥯

daun · 2022-08-17T17:35:00Z

src/index.js

+			containers: []
+		};
+		// fill up the object with scroll positions for each matching element
+		const $containers = document.querySelectorAll(this.options.scrollContainers);


I don't think the codebase uses the $ prefix for dom elements, I would keep that consistent.

hirasso · 2022-08-17T17:39:14Z

Great to hear! I'll apply your comments and finalize the inline docs, then it's ready to be merged from my side ⛱️

daun · 2022-08-17T17:40:16Z

src/index.js

+		};
+		// fill up the object with scroll positions for each matching element
+		const $containers = document.querySelectorAll(this.options.scrollContainers);
+		$containers.forEach((el) =>


If we turn this into a .map and create the containers object directly, we'd save a few lines. Also maybe reorder to create the containers first, then construct the final entry?

(Untested)

const window = { top: window.scrollY, left: window.scrollX }; const containers = queryAll(this.options.scrollContainers) .map((el) => ({ top: el.scrollTop, left: el.scrollLeft })); this.scrollPositionsStore[url] = { window, containers };

Nice, I'm old-school, keep forgetting that .map exists nowadays ;) ...window can't be used as a variable I think, but still – I will adopt your suggestion partly just to get used to thinking with .map more.

Sure window can be assigned to a const; it's scoped locally to that method.

ah sorry, wrong explanation – you just can't use it if you are immediately referencing window... Anyways, too complicated to explain, wait for the push :)

Even then, no? You're grabbing the scroll values from the global window object, only then are you creating a new local const. Maybe I have it backwards, but I'm doing this all over the place and it seems to be working 🤡

If I type this in the console:

const window = { top: window.scrollY, left: window.scrollX };

I get the error:

Uncaught SyntaxError: Identifier 'window' has already been declared".

If I put it in the program, I get this error:

ReferenceError: Cannot access 'window2' before initialization

Anyways, let's not make this more complicated than it necessarily has to be, shall we? ;)

Indeed, you're right, the scope doesn't work out here. I'll stop spreading nonsense now 🧃

daun · 2022-08-17T17:42:01Z

src/index.js

+	 * @returns {object}
+	 */
+	getStoredScrollPositions(url) {
+		return this.scrollPositionsStore[url] || {};


I'd suggest not returning the fallback object {} here. It makes it easier to check for a missing entry elsewhere and it's more obvious what's happening. The check on line 309/310 (scrollPositions.containers == null) would need to change then to check for null instead of assuming an empty object. But as a new contributor it'd be easier to grok I think.

If we did this, we would have to do scrollPositions && scrollPositions.containers, also the same for scrollPositions.window in on line 237. That's why I would prefer the function to always return an object.

You could move the || {} fallback to after the method call. That'd make it just as simple. Returning an empty object is a bit of a code smell as you need to reach into the empty object to even know if you got a return.

const position = this.getStoredScrollPositions(url) || {};

daun · 2022-08-17T17:43:31Z

src/index.js

+
+		// cycle through all containers on the current page and restore their scroll positions, if appropriate
+		const $containers = document.querySelectorAll(this.options.scrollContainers);
+		$containers.forEach((el, index) => {


For consistency and simplicity, queryAll(this.options.scrollContainers).forEach()

daun · 2022-08-17T17:44:11Z

I added a few comments, let me know what you think or if you agree.

hirasso · 2022-08-17T18:40:45Z

Ready to merge from my side. I'll create another PR for the docs when this has landed in master.

daun · 2022-08-17T18:41:24Z

Looks good! Ready to merge? Do we need to build dist files again?

hirasso · 2022-08-17T18:42:48Z

Ah of course. The dist files 🤖

daun · 2022-08-17T19:00:11Z

👏

Store and restore scroll positions

4dbe008

hirasso requested review from gmrchk and daun August 8, 2022 09:06

hirasso marked this pull request as draft August 8, 2022 09:17

hirasso removed request for gmrchk and daun August 8, 2022 09:17

hirasso added 2 commits August 8, 2022 11:25

Store the scroll positions on willReplaceContent instead of `clickL…

5eef92a

…ink` If a user only navigates using the browser's back and forward buttons and scrolls the window and/or some divs in between, the scroll positions will now also be updated.

Rename lastUrl to previousUrl

4412ce1

hirasso requested review from daun and gmrchk August 8, 2022 09:30

daun reviewed Aug 8, 2022

View reviewed changes

hirasso added 2 commits August 8, 2022 12:52

Add option scrollContainersSelector

df4ed5d

Add callback skipDeletingScrollPositions to the options

d10f95d

Allows to skip the deletion of scroll positions on `clickLink`, based on a callback.

hirasso marked this pull request as ready for review August 8, 2022 11:26

hirasso mentioned this pull request Aug 8, 2022

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

Closed

3 tasks

hirasso requested review from daun and removed request for gmrchk August 11, 2022 19:36

Merge branch 'swup:master' into feature/restore-scroll

13121f7

hirasso mentioned this pull request Aug 12, 2022

swup.scrollTo() method needs review #30

Closed

hirasso added 2 commits August 17, 2022 17:23

Major refactor and cleanup

f55ad3b

- Remove duplicate code - Avoid unreachable else-statements - Introduce guard clauses - Rename new options

Apply prettier

be906c5

daun reviewed Aug 17, 2022

View reviewed changes

hirasso added 2 commits August 17, 2022 20:36

Refactor based on comments

281ab8d

Merge branch 'swup:master' into feature/restore-scroll

a1bac69

hirasso requested a review from daun August 17, 2022 18:40

Build dist files

f6db538

daun approved these changes Aug 17, 2022

View reviewed changes

hirasso merged commit 87e1312 into swup:master Aug 17, 2022

hirasso deleted the feature/restore-scroll branch August 17, 2022 18:59

hirasso mentioned this pull request Sep 12, 2022

New global option: resolvePath swup/swup#512

Merged

5 tasks

hirasso mentioned this pull request Nov 7, 2022

New option resolvePath swup/swup#524

Closed

2 tasks

Store and restore scroll positions #26

Store and restore scroll positions #26

Conversation

hirasso commented Aug 8, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hirasso Aug 8, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hirasso Aug 8, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

daun commented Aug 8, 2022

hirasso commented Aug 8, 2022

hirasso commented Aug 9, 2022 • edited Loading

daun commented Aug 11, 2022

daun commented Aug 11, 2022

hirasso commented Aug 12, 2022

hirasso commented Aug 17, 2022 • edited Loading

daun commented Aug 17, 2022

Choose a reason for hiding this comment

hirasso commented Aug 17, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hirasso Aug 17, 2022 • edited Loading

Choose a reason for hiding this comment

hirasso Aug 17, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

daun Aug 17, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

daun commented Aug 17, 2022

hirasso commented Aug 17, 2022

daun commented Aug 17, 2022

hirasso commented Aug 17, 2022

daun commented Aug 17, 2022

hirasso commented Aug 8, 2022 •

edited

Loading

hirasso Aug 8, 2022 •

edited

Loading

hirasso Aug 8, 2022 •

edited

Loading

hirasso commented Aug 9, 2022 •

edited

Loading

hirasso commented Aug 17, 2022 •

edited

Loading

hirasso Aug 17, 2022 •

edited

Loading

hirasso Aug 17, 2022 •

edited

Loading

daun Aug 17, 2022 •

edited

Loading