search

webcreate / infinite-ajax-scroll

Turn your existing pagination into infinite scrolling pages with ease
https://infiniteajaxscroll.com
Other
899 stars 349 forks source link

Loading duplicate pages on refreshing or going back to page #881

Open alexmitev81 opened 10 months ago

alexmitev81 commented 10 months ago

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.

unnamed

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