В предыдущем совете Руст рассказал, как сверстать горизонтальное меню, прокручивающееся на мобильных. В этом совете — как сделать его удобнее.

Чтобы текущий пункт меню всегда оказывался по центру, а не за границей экрана, нужно добавить немного Яваскрипта:

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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Отправить
Поделиться
Запинить

Комментарии

Сергей Фомкин

Все класс! Но если поставить реальные ссылки, они не работают.

14 янв 2019

Сергей, это сделано ради демонстрации. Чтобы ссылки заработали, уберите e.preventDefault() в handleClick или обработчик целиком (см. addEventListener('click')).

20 янв 2019

Рекомендуем похожие советы