Некоторые широкие модули сложно адаптировать под узкий экран.
Детализированную горизонтальную картинку или вытянутую таблицу можно вписать в экран смартфона по ширине, но так уменьшится масштаб, будет сложнее увидеть важные и интересные детали. В идеале нужно придумать и сделать альтернативную версию модуля для узкого экрана, но это дополнительная работа, на которую не всегда есть время и ресурсы.
Лайфхак: модуль можно не адаптировать. Поместите его в контейнер с горизонтальной прокруткой и обозначьте, что содержимое можно крутить:
<div class="scrollable">
<div class="scrollable__in">
<img src="./milky-way-ultrawide.jpg" alt="…">
</div>
</div>
.scrollable {
--fadeSize: 18px;
width: 100%;
position: relative;
}
.scrollable::before,
.scrollable::after {
content: '';
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
height: 100%;
width: var(--fadeSize);
pointer-events: none; /* Отключаем нажатие на элемент, чтобы в зоне градиентов по краям тоже работала прокрутка */
}
.scrollable::before {
left: 0;
background: linear-gradient(to right, #fff, transparent);
}
.scrollable::after {
right: 0;
background: linear-gradient(to left, #fff, transparent);
}
.scrollable__in {
overflow: scroll;
-webkit-overflow-scrolling: touch; /* Сохраняем инерцию, «оттягивание» прокрутки на мобильном */
padding: 0 var(--fadeSize);
}
.scrollable__in img {
min-width: 768px; /* Обязательно задаём минимальную ширину содержимого, чтобы оно не ужималось больше нужного по ширине контейнера */
}
Самый простой способ обозначить наличие прокрутки — фиксированные градиенты из цвета страницы в прозрачность по краям содержимого. Чтобы градиенты не было видно в крайних точках прокрутки, придётся добавить содержимому отступы. Более качественное и продвинутое решение — обрабатывать прокрутку Яваскриптом и, в зависимости от позиции, показывать или скрывать градиенты. Так можно будет избежать лишних отступов, но это потребует дополнительного программирования.
Важный нюанс: горизонтальная прокрутка — привычный и понятный жест для смартфонов и планшетов, но не для компьютера с мышью. Поэтому в идеале применять приём только на устройствах с тач‑экранами. Например, с помощью медиа‑выражения:
.scrollable::before,
.scrollable::after {
/* … */
display: none;
}
@media (max-width: 960px) and (hover: none) {
.scrollable::before,
.scrollable::after {
display: block;
}
.scrollable__in img {
min-width: 768px;
}
}
Ещё варианты использования
Приём активно используется на сайте бюро. На страницах Школ бюро горизонтальный скролл есть у горы знаний с подробностями о датах ступеней и дедлайнов, у огромного расписания и у хитрой таблицы баллов за конкурс для поступающих. В последнем случае обратите внимание — крутится только содержимое таблицы, а заголовки залипают для удобства чтения:
Приём можно развивать и применять не только для узких экранов. На странице диаграммы экспедиций Амундсена и Скотта приём добавляет удобства и позволяет изучить диаграмму в большем масштабе, чем если бы её просто вписали в ширину страницы. Обратите внимание на миникарту и на то, как решена проблема с горизонтальным скроллом на компьютере — диаграмму можно хватать и перетаскивать мышью.
Сайт «Эволюция человека» — дипломный проект студентов Школы бюро — полностью основан на горизонтальной прокрутке. Предположу, что для более понятного и привычного представления временной линии. Проблема горизонтальной прокрутки на компьютере решена перехватом обычной вертикальной прокрутки и превращением её в горизонтальную.
Пользуйтесь с умом
Приём с горизонтальной прокруткой мощный, но компромиссный. На мой вкус, он подходит для разового применения в особо сложных модулях, где экономия времени и сил на полноценную адаптивную версию перевешивает пользу от неё.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.