Loading duplicate pages on refreshing or going back to page

[alexmitev81]

When I scroll to page 2, 3, 4. etc. and hit refresh in the browser or open a link and then go back, some pages get loaded twice, and some never get loaded.

When I go to page 4, pages 2 and 3 get loaded twice. When I go to page 6, page 2, 3 and 4 get loaded twice. The first page never gets loaded, and there is duplicate content from pages 2, 3, etc.

My setup:

new InfiniteAjaxScroll('.products-block', {
  item: '.product-cols',
  next: '.page-next',
  prev: '.page-prev',
  pagination: '.pagination'
});

First page code:

    <ul class="pagination">
    <li class="active"><span>1</span></li>
    <li><a class="page-next" href="/%D0%BF%D1%80%D0%BE%D0%BC%D0%BE%D1%86%D0%B8%D0%B8?page=2">2</a></li>
    <li><a href="/%D0%BF%D1%80%D0%BE%D0%BC%D0%BE%D1%86%D0%B8%D0%B8?page=3">3</a></li>
    <li><a href="/%D0%BF%D1%80%D0%BE%D0%BC%D0%BE%D1%86%D0%B8%D0%B8?page=4">4</a></li>
    </ul>

Second page code:

    <ul class="pagination">
    <li><a href="/%D0%BF%D1%80%D0%BE%D0%BC%D0%BE%D1%86%D0%B8%D0%B8">|&lt;</a></li>
    <li><a href="/%D0%BF%D1%80%D0%BE%D0%BC%D0%BE%D1%86%D0%B8%D0%B8">&lt;</a></li>
    <li><a class="page-prev" href="/%D0%BF%D1%80%D0%BE%D0%BC%D0%BE%D1%86%D0%B8%D0%B8">1</a></li>
    <li class="active"><span>2</span></li>
    <li><a class="page-next" href="/%D0%BF%D1%80%D0%BE%D0%BC%D0%BE%D1%86%D0%B8%D0%B8?page=3">3</a></li>
    <li><a href="/%D0%BF%D1%80%D0%BE%D0%BC%D0%BE%D1%86%D0%B8%D0%B8?page=4">4</a></li>
    </ul>

Third page code:

    <ul class="pagination">
    <li><a href="/%D0%BF%D1%80%D0%BE%D0%BC%D0%BE%D1%86%D0%B8%D0%B8">|&lt;</a></li>
    <li><a href="/%D0%BF%D1%80%D0%BE%D0%BC%D0%BE%D1%86%D0%B8%D0%B8?page=2">&lt;</a></li>
    <li><a href="/%D0%BF%D1%80%D0%BE%D0%BC%D0%BE%D1%86%D0%B8%D0%B8">1</a></li>
    <li><a class="page-prev" href="/%D0%BF%D1%80%D0%BE%D0%BC%D0%BE%D1%86%D0%B8%D0%B8?page=2">2</a></li>
    <li class="active"><span>3</span></li>
    <li><a class="page-next" href="/%D0%BF%D1%80%D0%BE%D0%BC%D0%BE%D1%86%D0%B8%D0%B8?page=4">4</a></li>
    </ul>

I'm testing this on Firefox 117.0.1 on Windows 10

[axxler]

Im having the same problem on one of websites, where I'm using it. Cant understand what can be a reason.

[fieg]

Could you create a scaled down version of your setup in Codesandbox which presents the bug? You can take an existing example as starting point: https://codesandbox.io/p/sandbox/github/webcreate/infinite-ajax-scroll/tree/master/examples/articles