Как делают такие query?

Question

[DeniSidorenko]

Добрый день, есть сайт https://www.delivery-club.ru/srv/KFC_msk?vendorCat...
Если мы скроллим вниз url меняется к примеру на https://www.delivery-club.ru/srv/KFC_msk?vendorCat...
Это отличное решение ибо позволяет поделиться ссылкой именно на тот пункт меню что требуется. Чем то похож на якорные ссылки но мне кажется здесь другая разработка. Кто может подсказать как такое делается и на чистом ли JS это?

Answer 1

[ddrigass]

var state = { 'page_id': 1, 'user_id': 5 };
var title = 'Hello World';
var url = 'hello-world.html';

history.pushState(state, title, url);

Делад такое когда было необходимо реализовать бесконечный скролл. Советую где-то хранить координаты начала каждого из пунктов, где необходимо менять ссылку.

Answer 2

[Виталий Б]

у них используется vue, может стоит в его сторону копать.
?vendorCategoriesQuery=-2 равен атрибуту data-id (<ul data-id="-2" class="vendor-menu__list">)
наверное можно попробовать и на якорях сделать.
А если на чистом js:
1. отслеживаем скролл до блока категории
2. меняем url https://developer.mozilla.org/ru/docs/Web/API/Hist...
при открытии ссылки следовательно читаем из url параметр vendorCategoriesQuery
и скролим до блока

Comments

[Сергей П]

Если динамическая подгрузка при скролле и сверху и снизу, то можно не скроллить после загрузки страницы по ссылке, а "нарисовать" скролл-бар так, будто сверху что-то есть, а подгружать это только при фактическом скролле вверх.
ИМХО с такого вида ссылками это выглядит как-то не консистентно. Мне кажется гораздо логичнее и элегантнее, когда динамически в ссылке меняется якорь через #. Это позволит и преренжер страницы на сервере сделать с запасом и с индексацией таких страниц, мне кажется, меньше побочных эффектов будет.