Горизонтальная прокрутка на чистом CSS

От автора: статья нашего гостя, Питера Бизменса. Питер – front-end разработчик на сайте Audience, где он любит писать стили на SCSS. Сегодня он нам покажет то, что я называю честным CSS трюком. Весь веб имеет вертикальное строение. Вы читаете сайт, как обычную книгу: слева направо, сверху вниз. Но иногда хочется уйти от вертикальности и сделать что-то сумасшедшее: сделать горизонтальный список. Или еще безумнее, горизонтальный сайт!

Было бы неплохо, если бы мы могли делать вот так:

/* ненастоящий код */ div { scroll-direction: horizontal; }

/* ненастоящий код */ div { scroll - direction : horizontal ;

К сожалению, такого не будет. Такого даже в планах нет в CSS.

Это очень плохо, потому что в компании, в которой я работаю, это бы очень пригодилось. Мы делаем очень много презентаций, а презентация – это довольно горизонтальная штука. Обычно соотношение сторон у слайдов составляет 4:3 или 16:9. Из-за этого у нас возникает постоянная проблема с горизонтальными слайдами и вертикальными веб-технологиями. Под «мы» я имею в виду себя. Но что я люблю, так это трудности.

Другой вариант использования

Мне в голову пришел конкретный способ применения. Идея в том, что покупателям было бы удобно просматривать все товары на одном слайде. Естественно, каталог товаров не уместился бы в одном виде. Поэтому мы решили разбить каталог на три категории, каждая с горизонтальной прокруткой. Таким образом, три самых популярных товара видны в каждой категории, а к менее важным товарам открыт легкий доступ.

Способ без JavaScript

Все мы знаем, что на JS существует масса способ сделать горизонтальную прокрутку. Некоторые примеры есть на CSS-Tricks . Мне стало интересно, можно ли воплотить эту идею на чистом CSS. Решение оказалось очень простым:

создаем контейнер с элементами;

поворачиваем контейнер на 90 градусов против часовой стрелки, чтобы нижняя грань оказалась справа;

поворачиваем элементы внутри контейнера обратно на свое место.

Шаг 1) создаем контейнер

Создайте блок div с множеством дочерних элементов.

В нашем примере прокручиваемый контейнер будет 300px шириной, в нем будет 8 элементов 100х100px. Размеры произвольные, можно задать любые.

item 1 item 2 item 3 item 4 item 5 item 6 item 7 item 8

< 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:

Horizontal-scroll-wrapper { width: 100px; height: 300px; overflow-y: auto; overflow-x: hidden; }

width : 100px ; height : 300px ; overflow - y : auto ; overflow - x : hidden ;

И дочерние элементы:

Horizontal-scroll-wrapper > div { width: 100px; height: 100px; }

Horizontal - scroll - wrapper > div { width : 100px ; height : 100px ;

Шаг 2) поворачиваем контейнер

Теперь нужно повернуть контейнер на -90 градусов при помощи CSS свойства transform. Мы получили горизонтальный скроллер.

Horizontal-scroll-wrapper { ... transform: rotate(-90deg); transform-origin: right top; }

Horizontal - scroll - wrapper { . . . transform : rotate (- 90deg ) ;

Только есть одна маленькая проблема: дочерние элементы повернулись вместе с контейнером.

Шаг 3) возвращаем дочерние элементы обратно на свое место

Так как же вернуть элементы на свое место? Поверните его обратно при помощи CSS свойства transform.

Horizontal-scroll-wrapper > div { ... transform: rotate(90deg); transform-origin: right top; }

Horizontal - scroll - wrapper > div { . . . transform : rotate (90deg ) ; transform - origin : right top ;

Шаг 4) фиксированное позиционирование

Смотрится все неплохо, но есть пара проблем.

Мы повернули контейнер, а в качестве якоря задали правый верхний угол, из-за этого левая сторона сместилась на ширину контейнера. Если вам сложно представить, просто приложите палец к правому верхнему углу страницы и поверните ее. Выход: нужно повернуть ее обратно с помощью свойства translate.

Уже лучше. Но первого элемента все еще не видно, так как та же проблема наблюдается и с дочерними элементами. Это можно поправить, задав первому дочернему элементу верхний margin со значением его ширины или трансформировав все элементы, как контейнер. Самый простой способ, который я нашел, это добавить верхний padding к контейнеру, равный ширине дочерних элементов, тем самым создав буферную зону для элементов.

Совместимость

Я проверил совместимость на доступных мне устройствах.

Десктоп

Так как стилизация скроллбаров пока что работает только в Webkit/Blink браузерах, в Firefox и IE показывается обычный серый скроллбар. Это можно поправить с помощью JS и прятать их вообще, но это тема для другого урока.

Прокрутка с помощью колеса мыши отлично работает на десктопе. Но у моего ноутбука свое мнение на этот счет. На устройствах с тач скринами и тач падами демо ведет себя так, будто div вообще не поворачивали.

Мобильные устройства

Я был приятно удивлен, когда узнал, что Android понимает, что контейнер был повернут, и позволяет вам скролить с помощью свайпов вправо и влево.

С iOS же наоборот, все не так гладко. Браузер ведет себя так, будто контейнер не поворачивали вовсе. Поэтому для прокрутки нужно использовать свайпы вверх и вниз, что довольно странно. Overflow: hidden не решает проблему.

Заключение

По данным сайта Can I Use трансформации в CSS сейчас поддерживаются у 93%+ пользователей (на момент написания статьи, ноябрь 2016). Тут проблемы возникнуть не должно.

Хотя лучше не используйте этот метод в продуктиве. Я протестировал его на некоторых устройствах, но далеко не на всех и не так тщательно.

Самая большая проблема – сенсорные инпуты, в которых для перехода налево и направо нужно делать свайпы вверх и вниз. В качестве решения можно было бы прописать сообщение на сайте с объяснением, но тогда вам придется положиться на то, что пользователи прочитают его. И даже тогда это будет противоречить здравому смыслу. Другой способ решения – захватывать сенсорные инпуты с помощью JS на устройствах, но тогда лучше вообще все писать на JS и полностью отказаться от нашего CSS хака.

Иногда бывает просто необходимо сделать на странице блок, который бы имел свою полосу прокрутки. Конечно тут вспоминаются фреймы, но за то, что они давно уже отжили своё, они нам не подходят. Хотелось бы какое-нибудь решение, где обычному div"у можно было бы присобачить скролл. И такое решение есть, и не одно, а всё с использованием возможностей AJAX.

Вертикальный скролл с помощью jScrollPane Общие слова

jScrollPane - это плагин к любимейшей библиотеке jQuery . Позволяет он приделывать вертикальный скролл div"у. Скролл можно конфигурировать по внешнему виду как угодно. На странице плагина (ссылка "инфо") можно найти различные способы его применения. Среди них выделю два: первый - в нём предложены основные способы и внешние виды скроллов, второй - показана реализация скроллинг в скроллинге, а также скроллинг всей странице как таковой. Скачать плагин можно с официального сайта, но можно и с моего

Маленькие хитрости

Плагин я использовал в практике несколько раз. Один из таких примеров можно видеть . Внешний вид его нестандартен, что есть хорошо - можно лепить, всё что душе угодно (не душе, батенька, а заказчикам, заказчикам - прим.ред. ).

Иногда плагин требует установки дополнительныйх плагинов, чтобы работало колёсико мыши для скролла и чтобы изменялся размер скроллинга в зависимости от количества контента. Но, как показала практика, всё работает и без них . Конечно, может у меня сборка плагина какая-то спешал, но вряд ли, качал с официального кажется.

Пример

Совсем одробно разбирать код не буду, в принципе ничего сложного там нет. Однако на некоторых моментах остановлюсь.

HTML-файл. Структура блока со скроллом следующая

Контент

Есть внешний div с классом, есть внутренний div с идентификатором и обязательным классом scroll-pane. Всё. Вызов функции производится следующим образом:

$(function()
{
$("#vnutrenniy).jScrollPane({showArrows:true, scrollbarWidth: 16, arrowSize: 16});
});

При вызове указываются различные параметры, типа ширины скроллбара (scrollbarWidth), размера его стрелочек (arrowSize) и так далее. Основные из них следующие:

scrollbarWidth [число] - ширина скроллинга (по умолчанию 10)

scrollbarMargin [число] - отступ слева от скроллбара (по умолчанию 5)

wheelSpeed [число] - скорость колеса прокрутки в пикселах (по умолчанию 18)

showArrows [логическое] - показывать графические стрелочки или нет (по умолчанию false)

arrowSize [число] - высота стрелочки, если showArrows=true (рассчитывается через CSS, если не указана)

dragMinHeight [число] - минимальная высотка бегунка (по умолчанию 0)

dragMaxHeight [число] - максимальная высота бегунка (по умолчанию 99999!)

scrollbarOnLeft [логическое] - если скроллбар нужен слева, ставим true.

Теперь откроем файл jscroll.css. Смотрим следующие строки.

8-15 строки. Внутреннему div"у ставим ширину и высоту (!), оверфлоу (не обязательный параметр кажется), паддинг скорее всего понадобится, остальное неважно.

17-19 строки. Внешний div. Вот ему ни в коем случае нельзя прописывать высоту , и обязательно нужно указывать float: left . Всё это делается с одной целью - чтобы Опера 10 нормально работала со скроллом. Если это не соблюсти, то скролл дива будет синхронен со скроллом браузера и в итоге получится полная чушь. Помните об этом.

23-57 строки. Стили картинок для скролла

Изменение остальных строк по идее не нужно.

Вертикальный и горизонтальный скролл на FleXcroll

Не так ознакомился с этим скриптом. Он идёт без использования jQuery, что является плюсом (не всегда ж jQuery нужен). Вторым плюсом будет то, что есть горизонтальный скролл. Третий плюс заключается в том, что в архиве с плагином приложены примеры использования, причём хорошие, разноплановые, за что большой респект.

С плагином на проектах работать не приходилось, но первое знакомство оказалось приятным. Единственный замеченный минус заключается в том, что при наведении мышкой курсор не превращается в "ручку". Мне кажется это минус, так как интуитивно непонятно может быть скролл это или нет. Однако, мне думается, через css всё исправить не будет проблем.

В завершении

Вертикальные и горизонтальные скроллы для div"ов не являются проблемой в реализации, всё просто и легко осуществимо. Поэтому дерзайте, используйте, открывайте новое. Всегда буду рад услышать комментарии, вопросы, пожелания=).

Привет, друзья. Сегодня поговорим о плавной прокрутке сайта. То есть не о , при нажатии на кнопку или ссылку, а о плавной прокрутке при использовании колесика или ползунка.

Совсем коротенькая заметка, просто пришлось реализовать на одном из сайтов, и решил написать об этом в блог, пока готовлю более серьезную статью (виджет скидок), по просьбе одного из читателей. Артем, привет тебе. Я не забыл!

Конечно, многие пользуются браузерами, у которых и так настроена плавная прокрутка, многие используют специальное расширение для браузера, но не все. Давайте же добьемся плавности на большинстве устройств, с которых будут посещать ваш сайт.

Плагин для плавной прокрутки сайта

Для решения поставленной задачи я выбрал плагин Malihu-custom-scrollbar-plugin , так как у него очень много возможностей:

• Вертикальная и / или горизонтальная полоса прокрутки.
• Настраиваемый импульс прокрутки.
• Плавная прокрутка колесиком мыши.
• Плавная прокрутка за ползунок.
• Поддержка клавиатуры и плавная прокрутка стрелочками или PgUp/PgDn.
• Поддержка сенсорных экранов.
• Готовые к использованию темы.
• Ручная настройка с помощью CSS.
• Разные варианты отображения ползунка.
• Возможность добавить плавный скролл различным элементам на странице, у которых он присутствует.

Конечно, для многих этот функционал может быть избыточным. Если вы просто хотите сгладить прокрутку колесиком, то в конце разберем совсем простое решение для этих целей.

«Стоп, плавный scroll в различных блоках это хорошо, но где же сама плавная прокрутка сайта из-за который мы пришли?» — скажете вы. Спокойствие. Сейчас мы этим займемся.

Подключения плагина

Так как выбранное решение — это jQuery плагин, то первым делом и подключим к сайту сам jQuery, если он у вас не подключен.

Теперь скачайте плагин для плавной прокрутки, по ссылке выше, и подключите к сайту 2 файла.

• jquery.mCustomScrollbar.concat.min.js
• jquery.mCustomScrollbar.min.css

Получится такая структура:

Плавный скролл сайта

Главное помните, что все зависящие от jQuery плагины должны подключаться после самого jQuery.

После того как все подключили, нужно инициализировать скрипт:

(function ($) { $(window).on("load", function () { $("body").mCustomScrollbar({ theme: "dark-thin" }); }); })(jQuery);

И добавить в CSS несколько простых правил, чтобы прокрутка применилась к документу. В самом начале вашего файла стилей добавьте следующую разметку:

Body, html { height: 100%; overflow: hidden; }

Это позволит убрать стандартную полосу прокрутки браузера и задать высоту, понятную скрипту. Не бойтесь, если подключаете к уже готовому сайту. В 99% случаев это никак не повлияет на вашу разметку.

Подключается точно так же как и первый, имеет всего 3 настройки и весит всего 2.6 килобайт:

$(function() { jQuery.scrollSpeed(100, 800, "easeOutCubic"); })

Где первое число — это шаг прокрутки, второе число — это скорость, а третье — тип анимации.

На этом — все. Всем — пока.

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

Понадобится

Слой с фиксированным размером и CSS-стиль.

CSS

В CSS-классе.scroll устанавливаются параметры 600px в длину и 300px в высоту, внутренний отступ, рамка и цвет фона. НО! Самое главное параметр overflow:auto устанавливает появление полосы прокрутки при количестве текста большим, чем размер слоя.

Scroll { width:500px; height:300px; /* необходим фиксированный размер */ overflow:auto; /* прокрутка появляется по необходимости */ padding:10px 20px; border:#999 1px solid; background-color:#FAFAFA; }

HTML

Наибольшее распространение получили этиленгликолевые охлаждающие жидкости на основе этиленгликоля и воды (дистиллированной) с комплексом присадок. Антифризы получаются как водные растворы соответствующих концентратов. В процессе эксплуатации качество антифриза можно контролировать по плотности. Из охлаждающей жидкости в процессе эксплуатации в первую очередь испаряется вода, которую следует периодически доливать (дистиллированную). Необходимо следить за тем, чтобы в антифризы не попадали бензин и масла, так как они вызывают вспенивание и выброс жидкости из системы. Срок службы охлаждающих жидкостей типа «Тосол» и «Лена» ограничивается долговечностью присадок и обычно составляет 2 года; по пробегу для различных автомобилей в среднем составляет 50000 км. При первом техобслуживании подержанного автомобиля следует заменить охлаждающую жидкость. После слива старой жидкости заправьте систему чистой водой, пустите двигатель и дайте ему поработать на холостых оборотах 15-20 минут; затем слейте воду и заправьте систему новой охлаждающей жидкостью.

Результат

На экране вы увидите небольшую рамку с текстом и с границей серого цвета.

Наибольшее распространение получили этиленгликолевые охлаждающие жидкости на основе этиленгликоля и воды (дистиллированной) с комплексом присадок.

Антифризы получаются как водные растворы соответствующих концентратов. В процессе эксплуатации качество антифриза можно контролировать по плотности. Из охлаждающей жидкости в процессе эксплуатации в первую очередь испаряется вода, которую следует периодически доливать (дистиллированную). Необходимо следить за тем, чтобы в антифризы не попадали бензин и масла, так как они вызывают вспенивание и выброс жидкости из системы.

Срок службы охлаждающих жидкостей типа «Тосол» и «Лена» ограничивается долговечностью присадок и обычно составляет 2 года; по пробегу для различных автомобилей в среднем составляет 50000 км.

При первом техобслуживании подержанного автомобиля следует заменить охлаждающую жидкость. После слива старой жидкости заправьте систему чистой водой, пустите двигатель и дайте ему поработать на холостых оборотах 15-20 минут; затем слейте воду и заправьте систему новой охлаждающей жидкостью.

3. Принудительная установка вертикальной и горизонтальной прокрутки в блоке CSS
4. Пример div блока с прокруткой

В данной статье мы разберём вопрос создания блока (div) фиксированного размера с возможностью прокрутки по горизонтали и вертикали. Это можно реализовать средствами CSS. За это отвечает свойство overflow .

О полезном свойстве overflow Свойство overflow отвечает за отображение содержания блочного элемента. Можно применить в том случае, когда контент не помещается полностью и выходит за область блока.

overflow-x - отвечает за отображением содержания блочного элемента по горизонтали.
overflow-y - отвечает за отображением содержания блочного элемента по вертикали.

Код CSS

Prokrutka {
overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если содержимое больше блока */
}

Свойства и значения overflowvisible - отображается все содержание элемента, даже за пределами установленной ширины.
hidden - отображается только область внутри элемента, остальное скрыто.
scroll - принудительно добавляется горизонтальная (y) или горизонтальная (x) полоса прокрутки.
auto - автоматом добавляется горизонтальная полоса прокрутки, в случае если блок меньше.

Рассмотри пример класса CSS. В width и height устанавливаем нужные нам ширину и высоту блока (за них не будет выходить содержимое блока), а свойством overflow: auto; задаем прокрутку по горизонтали в случае надобности

Код CSS

Prokrutka {
width:150px; /* ширина нашего блока */
height:100px; /* высота нашего блока */


overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если больше блока */
}

Принудительная установка прокрутки в блоке CSS Можно также принудительно создать прокрутку по высоте и ширине. Для этого каждой оси: overflow-y: scroll; (вертикаль) overflow-x: scroll; (горизонталь) укажем параметр scroll, принудительная прокрутка.

Код HTML и CSS

Prokrutka {
height:150px; /* высота нашего блока */
background: #fff; /* цвет фона, белый */
border: 1px solid #C1C1C1; /* размер и цвет границы блока */


}

Пример div блока с прокруткойКод HTML и CSS

Пример работы CSS

.prokrutka {
height: 200px; /* высота нашего блока */
width: 200px; /* ширина нашего блока */
background: #fff; /* цвет фона, белый */
border: 1px solid #C1C1C1; /* размер и цвет границы блока */
overflow-x: scroll; /* прокрутка по горизонтали */
overflow-y: scroll; /* прокрутка по вертикали */
}

А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации.



Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Посмотреть работу скрипта на примере ниже.