x
 
Алексей
18 октября 2018
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

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

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

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

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


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

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

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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.
Вёрстка и прототипирование — дисциплина Школы дизайнеров. Набор весной. Оставьте почту, и мы напишем вам, когда откроется следующий набор.
 

Поделиться
Отправить

Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Каким способом сделать простую анимацию на спрайтах Как устроена беспарольная аутентификация почтой 7




Недавно всплыло

1 Практика: формулировка полезного действия 8 Как вы верифицируете оценку сроков от сотрудника? 1 3