Glad you were able to solve your issue.
Just to provide some more context on this. There’s this Frontity Feature created to to facilitate the implementation of infinite scroll in Frontity projects.
As you can read in the Feature Discussion…
So, yes, you have to take some extra steps right now to implement this feature but it will much more easy once this feature is finally released,
Hey @juanma,
First of all, thanks for the article.
Now, I got the infinite scroll working on my archives pages. Now the default view of archives in mars-theme is row-wise, I wanted to display it as a grid, so I used the flexbox.
Now, what happened is, the articles are returned with a container and if the articles are not even for the flexbox, the new articles would be appended to new block (as it is supposed to do). I am attaching the Snapshot, so you could better understand.
Here you can see the block marked 1 is the empty space if articles don’t even out the flexbox, what I want to do is start the newly fetched articles after that.
Now after some debugging, I edited the use-archive-infinite-scroll.tsx file, and instead of div, I returned the “React.Fragment”, and with it, half of the problem is solved, i.e. articles are returned in a single block.
Now what happening is that the articles only loading when I am at the top of the page (maybe where the first fetcher div is), and when I scroll to the end, the new articles are not fetching. Again when I go to the top, articles start fetching.
So it would be very helpful if someone has any insight on this.
Detailing the info suggested here when having issues will help the community to provide the best possible help as quickly and as efficiently as possible.
Sorry for the delay in response from my end. Here it’s festive season, so was a bit busy in that.
Anyways, I have uploaded files in a github repo and sharing its link with you.
I am very sorry for that error, actually that’s the URL where the frontity site will be. The backend is on another address. BTW, I have updated the Address with my WP URL in the repo.
Such a rookie mistake, again I’m sorry and thanks, as always.
I am not sure the infinite scroll beta is in sync with the latest Frontity package updates, so it may not be working right now if combined with the latest versions.
We are going to release the final version soon, so I would suggest waiting for that, and then, if you are still having problems we can check them out
Infinite scroll for archive posts is working absolutely fine.
The scenario is as follows:
I am using a flexbox to show posts, and firstly the homepage shows 10 posts, the posts are in a container and there are 3 posts in a row, so the 4th row only contains 1 post. Take a look at this https://frontity.captainweb.in
Now, what I want is using the blank space, so I tried it without a container, and after that when i refresh the homepage, the infine post fetch starts working right away at the start, instead of going at the bottom.
Hope, i am not blabbering. If there’s anything that i wasn’t able to describe properly, let me know.
If you refresh the page it will start again from the URL that the user is in. For example, if he/she is in /page/3 or /some-post it will start there. That is expected.
It is when the user scrolls down, the infinite scroll triggers, he/she clicks on a post and finally goes back to the last page using the “Back” button of the browser when the scroll is preserved.
That is how it should work.
The way you described it is ideal, but it doesn’t worked that way when I modified the component.
When I visit a page, I will scroll down until last post, after which infinite scroll should work, ideally. But the case when I modify the file, and visit the site, it will start pagination right away, instead of waiting for me to scroll to the last post.
