Как двигаться по якорям при горизонтальной прокрутке сайта на реакте?

Question

[nos43ratu]

Я пытался сделать приложение на подобии этого сайта на реакте и попробовал повернуть сайт горизонтально и двигаться по якорям но это не вышло. Можете подсказать как это реализовать

Comments

[Сергей Сунцев]

Что конкретно не вышло?

[nos43ratu]

Сергей Сунцев, якоря пытались двигаться по вертикали когда сайт расположен горизонтально и просто стояли на месте. Я пробовал использовать библиотеки по типу react-anchor-point но они тоже не могли в горизонтальность

[Сергей Сунцев]

nos43ratu, Вы прям html якорями делали?
В целом все можно реализовать на чистом js.
Для этого задайте вашим элементам идентификаторы и скрольте страницу к ним по scrollBy(x,y)
Вот статья

[hzzzzl]

nos43ratu, посмотри в консоли браузера стили, это НЕ горизонтальная перемотка, а через css анимируется ширина width блоков, страница поделена на левый/правый и в нужный момент подставляется ширина нужному блоку



стильненько и хорошо продумано, но в общем-то без мистики

[macme]

hzzzzl, можно пример?
Стало интересно как это реализовать)

[hzzzzl]

macme, а вынесу даже в ответы

Answer 1

[hzzzzl]

вынесу свой коммент отдельно в ответы

посмотри в консоли браузера стили, это НЕ горизонтальная перемотка, а через css анимируется ширина width блоков, страница поделена на левый/правый и в нужный момент подставляется ширина нужному блоку

например на быструю руку с 3 блоками


менять урл через history.pushState()
при загрузке страницы смотреть урл и добавлять блокам нужные классы (react-router-dom с этим справится)