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

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

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

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы