В предыдущем совете Руст рассказал, как сверстать горизонтальное меню, прокручивающееся на мобильных. В этом совете — как сделать его удобнее.
Чтобы текущий пункт меню всегда оказывался по центру, а не за границей экрана, нужно добавить немного Яваскрипта:
scrollToActiveItem() {
const scrollParent = this.el.parentNode
// Ширина родителя — «окна», в котором прокручивается меню
const scrollParentWidth = scrollParent.clientWidth
// Ширина активного пункта меню
const activeElWidth = this.activeEl.clientWidth
// Смещение активного пункта меню по горизонтали от левого края родителя
const activeElLeftOffset = this.activeEl.offsetLeft
// Проверяем, не влезает ли активный элемент в «окно»
const isActiveElInvisible = activeElLeftOffset + activeElWidth > scrollParentWidth
if (isActiveElInvisible) {
// Прокручиваем родителя так, чтобы активный элемент стало точно по центру:
// scrollLeft = activeElLeftOffset прокрутит активный элемент к левому краю «окна»;
// scrollLeft = activeElLeftOffset - (scrollParentWidth / 2) прокрутит активный элемент
// так, что он станет левым краем по центру «окна».
scrollParent.scrollLeft = activeElLeftOffset - (scrollParentWidth / 2) + (activeElWidth / 2)
} else {
scrollParent.scrollLeft = 0
}
}
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.