Всё больше новостные сайты и блоги превращаются в длинную портянку которую от статьи к статье надо долго мотать по вертикали. Чтобы облегчить прокрутку одни сайты скрывают часть статьи под спойлером. Другие сайты отображают часть статьи в ленте а для прочтения её заставляют перейти на отдельную страницу.
Я подумал почему бы не воспользоваться горизонталью? Разработчики браузеров дали достаточно CSS инструментов чтобы выстроить статьи по горизонтали и сделать удобный переход между ними.
Я создал минимальную демку которая работает за счёт CSS и имеет такие свойства:
- Статьи выстраиваются по горизонтали.
- Часть статьи не надо скрывать под спойлером так как вертикальная прокрутка для каждой статьи индивидуальна.
- На следующую статью можно перейти из любого места предыдущей прокрутив колёсико мышки с зажатым Shift или смахнув статью влево на планшете.
В статье я разберу СSS используемый для горизонтального блога.
<html> <head> <title>horizontal blog demo</title> <link href="horizontal-blog.css" rel="stylesheet"> <link href="css-min-fix.css" rel="stylesheet"> </head> <body> <div class="hb-viewport"> <div class="hb-container"> <article class="hb-page"> <h1>Lorem ipsum dolor sit amet</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo integer malesuada nunc vel risus... </article> <article class="hb-page"> <h1>Consectetur a erat nam at lectus urna duis</h1> Consectetur a erat nam at lectus urna duis. Cursus vitae congue mauris rhoncus aenean. Quis auctor elit sed vulputate mi sit amet mauris commodo. Odio pellentesque diam volutpat commodo sed... </article> </div> </div> </body> </html>
Разбираем CSS
horizontal-blog.css:
/*
Это окно через которое пользователь читает содержимое статьи. Изначально его функции выполнял :root элемент но я решил отвязаться от структуры html документа.
*/
.hb-viewport{
/*
Избавляемся от отступа поумолчанию у body не трогая стили css body.
*/
position: absolute; top: 0; left: 0;
/*
Задаём размеры viewport размером видимой области окна чтобы была возможна прокрутка по горизонтали.
*/
width: 100vw; height: 100vh;
/*
Задаём прокрутку по горизонтали а вертикальную скрываем так как нужно чтобы прокручивалась вниз каждая статья индивидуально.
*/
overflow-x: auto; overflow-y: hidden;
/*
Чтобы облегчить прокрутку задаём автоматическое выравнивание прокрутки по горизонтали.
*/
scroll-snap-type: x mandatory;
/*
Скрываем горизонтальную полосу прокрутки так как по умолчанию в Firefox она не скрывается и перекрывает последние строки текста. Благодаря этому правилу мы можем вывести указатель за пределы .hb-viewport и прочитать перекрытый горизонтальной полосой прокрутки текст.
*/
scrollbar-width: none; }
/*
Показываем горизонтальную полосу прокрутки. Это позволяет пользоваться ей когда указатель находится внутри .hb-viewport
*/
.hb-viewport:hover{ scrollbar-width: auto; }
/*
Благодаря display: flex; .hb-container выстраивает своё содержимое в длинную горизонтальную полосу.
*/
.hb-container{ display: flex; }
/*
.hb-page содержит в себе статью.
*/
.hb-page{
/*
Чтобы статью индивидуально можно было прокручивать по вертикали ограничиваем её по высоте её размером видимой части окна.
*/
max-height: 100vh;
/*
Скрываем то что не влезло добавляя полосу прокрутки по необходимости.
*/
overflow-y: auto;
/*
Привязываем выравнивание прокрутки по центру .hb-page.
*/
scroll-snap-align: center;
/*
Задаём ширину статьи до 80 символов для удобства чтения и добавляем поля по бокам до 100vw.
*/
min-width: min(80ch, 100vw); padding: 0 calc((100vw - 80ch) / 2); }
Поправляем CSS
Есть проблема с моим Firefox на Android планшете который перестал обновляться с версии 68.11. Он не поддерживает css функцию min(). Можно это поправить при помощи директивы @supports и @media.
css-min-fix.css:
/*
Проверяем что браузер не поддерживает min.
*/
@supports not (min-width: min(80ch, 100vw)) {
/*
Задаём ширину по умолчанию в 100vw.
*/
.hb-page{ min-width: 100vw; }
/*
Если видимая часть окна шире 80 символов то задаём ширину 80 символов.
*/
@media screen and (min-width: 80ch) { .hb-page{ min-width: 80ch; } } }
Готово
Теперь статьи блога выстроены горизонтально и от статьи к статье можно переходить мотая влево в право. Ну а сами статьи прокручиваются вверх вниз независимо и из любой части предыдущей статьи можно перейти в начало следующей.
Ссылки
ссылка на оригинал статьи https://habr.com/ru/post/535030/
Добавить комментарий