От автора: статья нашего гостя, Питера Бизменса. Питер – front-end разработчик на сайте Audience, где он любит писать стили на SCSS. Сегодня он нам покажет то, что я называю честным CSS трюком. Весь веб имеет вертикальное строение. Вы читаете сайт, как обычную книгу: слева направо, сверху вниз. Но иногда хочется уйти от вертикальности и сделать что-то сумасшедшее: сделать горизонтальный список. Или еще безумнее, горизонтальный сайт!
Было бы неплохо, если бы мы могли делать вот так:
|
1 2 3 4 |
/* ненастоящий код */ div { scroll-direction: horizontal; } |
К сожалению, такого не будет. Такого даже в планах нет в CSS.
Это очень плохо, потому что в компании, в которой я работаю, это бы очень пригодилось. Мы делаем очень много презентаций, а презентация – это довольно горизонтальная штука. Обычно соотношение сторон у слайдов составляет 4:3 или 16:9. Из-за этого у нас возникает постоянная проблема с горизонтальными слайдами и вертикальными веб-технологиями. Под «мы» я имею в виду себя. Но что я люблю, так это трудности.
Другой вариант использования
Мне в голову пришел конкретный способ применения. Идея в том, что покупателям было бы удобно просматривать все товары на одном слайде. Естественно, каталог товаров не уместился бы в одном виде. Поэтому мы решили разбить каталог на три категории, каждая с горизонтальной прокруткой. Таким образом, три самых популярных товара видны в каждой категории, а к менее важным товарам открыт легкий доступ.
Способ без JavaScript
Все мы знаем, что на JS существует масса способ сделать горизонтальную прокрутку. Некоторые примеры есть на CSS-Tricks. Мне стало интересно, можно ли воплотить эту идею на чистом CSS. Решение оказалось очень простым:
создаем контейнер с элементами;
поворачиваем контейнер на 90 градусов против часовой стрелки, чтобы нижняя грань оказалась справа;
поворачиваем элементы внутри контейнера обратно на свое место.
Шаг 1) создаем контейнер
Создайте блок div с множеством дочерних элементов.
В нашем примере прокручиваемый контейнер будет 300px шириной, в нем будет 8 элементов 100х100px. Размеры произвольные, можно задать любые.
|
1 2 3 4 5 6 7 8 9 10 |
<div class="horizontal-scroll-wrapper squares"> <div>item 1</div> <div>item 2</div> <div>item 3</div> <div>item 4</div> <div>item 5</div> <div>item 6</div> <div>item 7</div> <div>item 8</div> </div> |
Высота контейнера станет шириной и наоборот. Ниже «ширина» контейнера будет составлять 300px:
|
1 2 3 4 5 6 |
.horizontal-scroll-wrapper { width: 100px; height: 300px; overflow-y: auto; overflow-x: hidden; } |
И дочерние элементы:
|
1 2 3 4 |
.horizontal-scroll-wrapper > div { width: 100px; height: 100px; } |
Шаг 2) поворачиваем контейнер
Теперь нужно повернуть контейнер на -90 градусов при помощи CSS свойства transform. Мы получили горизонтальный скроллер.
|
1 2 3 4 5 |
.horizontal-scroll-wrapper { ... transform: rotate(-90deg); transform-origin: right top; } |
Только есть одна маленькая проблема: дочерние элементы повернулись вместе с контейнером.
Шаг 3) возвращаем дочерние элементы обратно на свое место
Так как же вернуть элементы на свое место? Поверните его обратно при помощи CSS свойства transform.
|
1 2 3 4 5 |
.horizontal-scroll-wrapper > div { ... transform: rotate(90deg); transform-origin: right top; } |
Шаг 4) фиксированное позиционирование
Смотрится все неплохо, но есть пара проблем.
Мы повернули контейнер, а в качестве якоря задали правый верхний угол, из-за этого левая сторона сместилась на ширину контейнера. Если вам сложно представить, просто приложите палец к правому верхнему углу страницы и поверните ее. Выход: нужно повернуть ее обратно с помощью свойства translate.
Уже лучше. Но первого элемента все еще не видно, так как та же проблема наблюдается и с дочерними элементами. Это можно поправить, задав первому дочернему элементу верхний margin со значением его ширины или трансформировав все элементы, как контейнер. Самый простой способ, который я нашел, это добавить верхний padding к контейнеру, равный ширине дочерних элементов, тем самым создав буферную зону для элементов.
|
1 2 3 4 5 |
.horizontal-scroll-wrapper { ... transform:rotate(-90deg) translateY(-100px); ... } |
Еще одно демо с прямоугольными дочерними элементами:
Совместимость
Я проверил совместимость на доступных мне устройствах.
Десктоп
Так как стилизация скроллбаров пока что работает только в Webkit/Blink браузерах, в Firefox и IE показывается обычный серый скроллбар. Это можно поправить с помощью JS и прятать их вообще, но это тема для другого урока.
Прокрутка с помощью колеса мыши отлично работает на десктопе. Но у моего ноутбука свое мнение на этот счет. На устройствах с тач скринами и тач падами демо ведет себя так, будто div вообще не поворачивали.
Мобильные устройства
Я был приятно удивлен, когда узнал, что Android понимает, что контейнер был повернут, и позволяет вам скролить с помощью свайпов вправо и влево.
С iOS же наоборот, все не так гладко. Браузер ведет себя так, будто контейнер не поворачивали вовсе. Поэтому для прокрутки нужно использовать свайпы вверх и вниз, что довольно странно. Overflow: hidden не решает проблему.
Заключение
По данным сайта Can I Use трансформации в CSS сейчас поддерживаются у 93%+ пользователей (на момент написания статьи, ноябрь 2016). Тут проблемы возникнуть не должно.
Хотя лучше не используйте этот метод в продуктиве. Я протестировал его на некоторых устройствах, но далеко не на всех и не так тщательно.
Самая большая проблема – сенсорные инпуты, в которых для перехода налево и направо нужно делать свайпы вверх и вниз. В качестве решения можно было бы прописать сообщение на сайте с объяснением, но тогда вам придется положиться на то, что пользователи прочитают его. И даже тогда это будет противоречить здравому смыслу. Другой способ решения – захватывать сенсорные инпуты с помощью JS на устройствах, но тогда лучше вообще все писать на JS и полностью отказаться от нашего CSS хака.
Автор: Pieter Biesemans
Источник: //css-tricks.com/
Редакция: Команда webformyself.
