Single post template with infinte scroll

Currently setting up infinite scroll to keep loading new single posts on a single post page.

My current setup is this:

  • post block that inherits from URL
  • query block with infinite scroll that loads more single posts (same block as above) from same category

The issue with this method is that it loads the inherited block and the first infinite scroll block when visiting the page. I’m wondering if there’s a way to prevent the infinite scroll block until user scrolls. Mainly to solve for SEO issues as it will have 2 H1s and potentially unfocused content between 2 posts.

I think one way to achieve this might be lazy load for a div… @Louis is this something that is possible?

Bumping to see if anyone has potential solution for infinite scrolling single post template?

Does this post have to be in the infinite scroll query? If not, simply Exclude Current.

Hi Louis,

Thanks for your response. Unfortunately, as the site is primarily a blog, the current post needs to be at the top.

Hello Jason,

Apologies, I now understand what you’re trying to achieve more precisely.

When you mention → Post block and Query block, can you confirm that these are two different blocks or simply one main Query block?

Cheers,

Hi Louis,

here’s a live example of how I currently have it setup:

Top is just the post content and bottom is a query block that uses the same post content template and queries for posts in the same category as the URL post.