Школа
Веб-разработка

Как сверстать прокручивающееся меню для мобильных? Вторая часть

Заходим с телефона на главную. Там меню в виде:

Новости Проекты Книги Школа …

От ссылки «Школа» видна первая только буква. Жмем на неё.
Открывается соответствующая страница и «Школа» отображается по центру, хотя порядок элементов меню прежний.

Вопрос: каким образом?

Алексей
18 окт 2018
👁 7375   🗩2
Веб-разработка

Как сверстать прокручивающееся меню для мобильных? Вторая часть

Заходим с телефона на главную. Там меню в виде:

Новости Проекты Книги Школа …

От ссылки «Школа» видна первая только буква. Жмем на неё.
Открывается соответствующая страница и «Школа» отображается по центру, хотя порядок элементов меню прежний.

Вопрос: каким образом?

Алексей
18 окт 2018
👁 7375   🗩2
Василий Половнёв
Технический директор бюро
Полезно
 15
15
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

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

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

Веб‑разработка
Полезно
 15
15
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

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

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

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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