Infinite Scroll history breaks the URL when using JSON

Question

I'm using the Infinite Scroll plugin for my products listings. The plugin is loading the data from a JSON and it's working fine if I don't enable the history.

Now I would like the plugin to change the history, so when the user opens a product detail page and then uses the back button he / she gets redirected to the last scroll position.

A problem occurs when I enable the history: 'replace' option that changes the page URL for the subfolder and path of my server-side script breaking all links and images.

Here is my init code:

$infiniteContainer = $('#resultsContainer').infiniteScroll({
    path: function() {
        return 'ajax/ajax.items.php?'
        + '&s=' + searchStr
        + '&cat=' + filterCat
        + '&sub=' + filterSubCat
        + '&order=' + orderBy
        + '&offset=' + this.pageIndex;
    },
    responseType: 'text',
    history: 'replace',
    loadOnScroll: true,
    checkLastPage: true
});

when I enable the history then my URL gets converted to:

mydomain.com/ajax/ajax.items.php?s=&cat=&sub=&order=&offset=1

and the URL should stay as mydomain.com/

How can I prevent infinite scroll to change the URL to the wrong path and just passing the variables I need for scrolling to a specific page?

Answer 1

When a new page is loaded from a URL specified by the path function, that URL replaces the current URL displayed in the address bar.
This is done in the setHistory function of the infinite-scroller (see line 1159 in infinite-scroll.pkgd.js).

If your goal is to load data from mydomain.com/ajax/ajax.items.php?s=&cat=&sub=&order=&offset=1 but have mydomain.com?s=&cat=&sub=&order=&offset=1 displayed in the address bar instead, you can modify that function.
I didn't find a way to configure behaviour of setHistory, so the following workaround replaces it (for the single InfiniteScroll instance infScroll):

const infScroll = new InfiniteScroll( '#resultsContainer', path: function() {
        return 'ajax/ajax.items.php?'
        + '&s=' + searchStr
        + '&cat=' + filterCat
        + '&sub=' + filterSubCat
        + '&order=' + orderBy
        + '&offset=' + this.pageIndex;
    },
    responseType: 'text',
    history: 'replace',
    loadOnScroll: true,
    checkLastPage: true
});

const originalSetHistory = infScroll.setHistory;

infScroll.setHistory = function (title, path) {
  const modifiedPath = path.replace("mydomain.com/ajax/ajax.items.php", "mydomain.com")
  originalSetHistory.call(infScroll, originalSetHistory, modifiedPath);
}