Как изменить URL, когда прокручивается страница?

Question

Дмитрий @moiseev1788

JavaScript

Как изменить URL, когда прокручивается страница?

Есть страница с контентом, которая имеет адрес example.ru/article_s.html, когда страница прокручивается до конца, загружается другой файл с контентом из другой папки: data/article.html.

С помощью window.history.pushState я изменил URL страницы, но он меняется только один раз, а в папке /data страниц много.

Как сделать так, чтобы URL заменялся при прокрутке страницы, при загрузке другого содержимого и при перезагрузке страницы сохранялось исходное состояние страницы?

html код, который указывает путь к новым загружаемым файлам:

<div class="article__article" data-url="/data/article.html">Content...</div>
<div class="article__article" data-url="/data/article2.html">Content...</div>

Скрипт прокрутки:

'use strict';

var width = $(window).width();
var height = $(window).height();
var $article_list = $('#article_list');
var sticky = 0;
var send = true;
var page = {
  init: function init() {
    var top = page.getScrollTop();

  },

  getScrollTop: function() {
    if (typeof pageYOffset != 'undefined') {
      //most browsers except IE before #9
      return pageYOffset;
    } else {
      var B = document.body; //IE 'quirks'
      var D = document.documentElement; //IE with doctype
      D = D.clientHeight ? D : B;
      return D.scrollTop;
    }
  },
  scrollPage: function() {
    var topPos = $('#get_article').offset().top;
    var top = page.getScrollTop();
    var diff = topPos - top;
    // console.log( diff +'||'+ top +'||'+ topPos);

    if ((diff <= (height - sticky)) && send) {

      var $last_article = $article_list.children().last()
      var _url = $last_article.attr('data-url');
      send = false;
      if (_url) {
        $.ajax({
          url: _url,
          type: 'GET',
          dataType: 'html',
          beforeSend: function() {
            // включение прелоудера
            send = false;
          },
          complete: function() {
            // отключение прелоудера
          },
          success: function(obj) {
            send = true;
            $article_list.append(obj);
            window.history.pushState({
                page: 'article__article'
              },
              'article',
              '/data/article.html',
            );
            const players = Array.from(document.querySelectorAll('#videoPlay')).map(p => new Plyr(p));
            const plyrs = Array.from(document.querySelectorAll('#plyrVideo')).map(plyrs => new Plyr(plyrs));
          },
          error: function(xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText + "\r\n" + xhr);
          }
        });
      }
    }
  }
};
/**
 * section init
 */
$(document).ready(function() {
  page.init();
});
/**
 * section scroll animation
 */
$(document).on("scroll", function() {
  page.scrollPage();

});