URL update on Infinite Scroll

Feature Requests / Improvements
1

Let’s say we have a single post template with infinite scroll and older posts (full posts) are loaded right below. When the user scrolls to the 2nd post, the URL should be updated to ensure it appears in the browser’s history and so that the user can grab it from the address bar. The permalink should match that of the currently visible post.

That is how news/blog websites that have this functionality implement it. Otherwise the infinite scroll on single posts is kind of pointless imo.

Has anyone done this in a bricks website?

Another feature that would be nice to have is stopping the infinite scroll after x number of loaded posts/pages and replace it with load more button, so that the user doesn’t “chase” the footer. Infinite scroll that is actually infinite :smiley: can by annoying in some cases and having a fixed footer isn’t ideal.

3 Likes
2

I second your URL update request.
How did you achieved to add infinite scroll posts on “single-post” page?

3

That’s in the native bricks query settings.

In the div containing the post content that you want to repeat

  1. Turn on “Use query loop”
  2. Query settings (the ∞ button)
  3. Setup your query according to your needs
  4. Scroll down and turn on infinite scroll

Down there you can see other useful settings also like offset and ajax loader.

Hope that helps.

1 Like
4

Thanks, but your instructions auto update the browser’s URL as scrolling?

Example on single page: (check how URL changes while scrolling)

Example on archive page:
https://plugins.yithemes.com/yith-infinite-scrolling/page/5/

5

No, the browser’s URL is not updated with the native bricks solution. This is why i created this thread in the first place! :grinning:

My instructions where only answering your question about infinite scroll on a single post page.

Yes, your example URLs are what i am looking for also. I hope someone comes up with a solution.

6

I think you may set interaction “Query AJAX Loader (End)” with action “Javascript (Function)”. In interaction you may need to pass desired Arguments like url. Then your JS may be like so:

<script>
function updateURL( postUrl ) {
event.preventDefault();
history.pushState(null, '', postUrl);
}
</script>

Haven’t tried it. You would need to play with it but i think you may acheive what you want.

2 Likes