Preserve scroll position and dynamically loaded items with infinite scroll

[cydstumpel]

What did you expect? 🧐

I load more content when the user reaches the end of a container, I also change the URL with a query string (f.e. ?load_more=2). I update the URL using createHistoryRecord, and window.history.pushState (if you could update the docs here to make it more clear you need both, that would be great!).

I expect when I click one of the newly loaded items and I go back one page that the scroll position is the same as it was before I clicked the item.

What actually happened? 😵‍💫

When I click one of the initially loaded items it works as expected, but when I click the dynamically loaded item it scrolls to the top of the page.

Recording from my project:
https://share.cleanshot.com/ySDwNB9Y

I believe the scroll position is not saved correctly when navigating after a createHistoryRecord or something??

Swup and plugin versions 📝

• swup: ^4.8.1
• @swup/scroll-plugin: ^3.3.2,

What browsers are you seeing the problem on? 🧭

Chrome, Firefox, Safari, Microsoft Edge

Relevant log output 🤓

URL to minimal reproduction 🔗

https://codesandbox.io/p/devbox/quizzical-kepler-4tj68v?workspaceId=ws_MWvEgzFMVziG8dH1did9UG

Checked all these? 📚

• I have read and searched the official docs
• I have checked discussions and existing issues for related problems
• I agree to follow this project's Code of Conduct
• I have provided all necessary information to the best of my knowledge

[cydstumpel]

Please open the codesandbox app in a separate tab to see the problem :)

Instructions to reproduce with the codesandbox.

This is without dynamically loaded items and createHistory things:

1. Scroll down a bit, click one of the items
2. Go back to the previous page (scroll position should be same as when initially clicked)
   This is what I always want to have happen :) ^

This is what happens with dynamically loaded content and createHistory:

1. Click load more
2. Click one of the new items
3. Go back to previous page (scroll position is suddenly the top of the page)

Thanks in advance, love the work you do!

[hirasso]

Hi @Sidstumple

We have a demo for infinite scroll + swup here:

https://glitch.com/edit/#!/swup-demo-infinite-scroll-cache?path=app.js

I see a few problems with your linked demo:

• Most importantly: New items loaded from the infinite scroll need to be injected into swup's cache manually. Otherwise, swup won't be able to "see" them and thus always load the first page of your list when navigating back.
• createHistoryRecord should not be used when implementing infinite scrolling. This is because you are not really navigating between pages, but rather appending elements yourself manually.
• I'd actually propose to not bother with the query parameter at all: If someone would send the link to someone else, and they would directly land at https://example.com/projects/?load_more=3 – how would they be able to go to the first and second page?
• If you absolutely need the ?load_more= query, updateHistoryRecord would be the better approach, as it doesn't push to the history stack. Maybe even in combination with resolveUrl, which allows you to define URLs swup should ignore completely:

{
  resolveUrl: (url) => {
    if (url.startsWith('/projects/?load_more=')) {
      return '/projects/';
    }
    return url;
  }
}

But as I mentioned before, I'd strongly advise against any history manipulation in this case.

[hirasso]

I've converted this to a discussion – happy to open a bug report if it turns out that there's actually a bug with swup. But before that, all the other issues need to be cleared up.

[hirasso]

One more note: CodeSandbox augment the history stack and scroll position – that's why unfortunately it's not a good fit for minimal reproductions for swup. That's also the reason why we migrated all our demos from CodeSandbox to glitch.com last year.

[cydstumpel]

Hi Rasso,

Thanks so much for your quick and detailed answer, I'll look into it later this week, and will get back to you with a Glitch demo if I still have any issues. :)