Azamat_Lee
@Azamat_Lee
Работаю с Wordpress

Прокрутка до активного пункта меню при прокрутке страницы (на мобильной версии)?

Перерыл уже всё что можно, никак не могу найти как реализовать автопрокрутку меню при скролле страницы.
Активный класс нужному пункту присваивается, осталось только прокрутить. Помогите, пожалуйста
https://klg.new.thebull.ru/takeout/ - здесь пытаюсь сделать это
https://eda.yandex/restaurant/papiny_burgery_glago... - тут это работает как хотелось бы, на мобильной версии.
  • Вопрос задан
  • 442 просмотра
Решения вопроса 1
MagnusDidNotBetray
@MagnusDidNotBetray
Самый елеустремленный человек
Для начала, на мобильной версии, элементу .takeout-nav задайте ширину 100vw, чтобы он прокручивался. Далее, в том месте, где вы добавляете пункту меню активный класс, добавьте примерно такой код:
const container = document.querySelector('.takeout-nav');
let containerRect = container.getBoundingClientRect();
let activeOptionRect = activeOption.getBoundingClientRect(); //activeOption - пункт меню, на который навешивается .active
if (containerRect.left + containerRect.width < activeOptionRect.left + activeOptionRect.width){
  container.scrollLeft += activeOptionRect.left - containerRect.left;
}
else if (activeOptionRect.left < containerRect.left){
  container.scrollLeft -= containerRect.left - activeOptionRect.left;
}

Первое что пришло в голову, возможно нужно допилить.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Privetiq
@Privetiq
Тестирую всегда на проде
1) Почему не использовать просто якорьные ссылки?) Зачем что-то выдумывать?)
2) для плавности и прочих штук со скроллом могу посоветовать либу scrollmagic.io, ну или берите любую другую готовую если самому писать на JS лень) https://ruseller.com/lessons.php?rub=32&id=2294
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы