Добавить скролл css. Горизонтальная прокрутка на чистом CSS

19.05.2019

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

Overflow в CSS отвечает за то, как будет выглядеть отображение информации в блоке, в случае превышения содержимого высоты или ширины этого блока. Это свойство применимо только к блочным элементам (display : block ; или те которые изначально являются блочными - div и так далее).

Возможные значения, которые принимает это свойство(по-умолчанию visible ):

Visible - Отображается все содержание элемента, даже за пределами установленной высоты и ширины.
Hidden - Отображается только область внутри элемента, остальное будет скрыто.
Scroll - Всегда добавляются полосы прокрутки.
Auto - Полосы прокрутки добавляются только при необходимости.
Inherit - Наследует значение родителя.

Чаще всего это свойство используют, чтобы убрать или добавить полосы прокрутки какому-то элементу. Таким образом, например, поступают с фреймами, чтобы не впихивать их в полный размер. Либо для вставки какого-то большого текста, чтобы он не занимал пол страницы, а уютненько сидел в специальном блоке, и там его можно было прокрутить и прочитать. По большей части свойство решает проблемы комфортного отображения информации.

В демо вы сможете пронаблюдать, как действует каждое из значений свойства на деле:

Код HTML

Страница visible hidden

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

Разнообразный и богатый опыт укрепление и развитие структуры позволяет оценить значение направлений прогрессивного развития. Таким образом дальнейшее развитие различных форм деятельности позволяет выполнять важные задания по разработке новых предложений. Повседневная практика показывает, что реализация намеченных плановых заданий обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач. Значимость этих проблем настолько очевидна, что укрепление и развитие структуры представляет собой интересный эксперимент проверки существенных финансовых и административных условий. Таким образом постоянный количественный рост и сфера нашей активности позволяет оценить значение форм развития. Идейные соображения высшего порядка, а также рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач.

scroll

auto

body {margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;} h2 {color:#CC0033;} div { width:200px; /* фиксированная ширина */ height:300px; /* фиксированная высота */ border:1px solid #555; padding:4px; margin:4px; float:left; } .VisibleDiv {overflow:visible;} .HiddenDiv {overflow:hidden;} .ScrollDiv {overflow:scroll;} .AutoDiv {overflow:auto;}

Стоит обратить внимание на то, что в данном конкретном случае блоки с заданой фиксированной высотой и шириной. Это важно, например, рассмотрим вариант, когда высота блока задана в auto :

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

Но в этом случае заключается небольшая опасность, встретившись с которой многие не понимают, почему она возникла и как ее исправить. Дело в том, что если блок с overflow : visible ; то есть значением по-умолчанию, а его содержимое имеет элементы с любым значением float , кроме none , то отображаться все это будет некорректно. Для того, чтобы понять, что это за ситуация, рассмотрим пример:

Страница Под блоком VisibleDiv идет другой блок visible

Идет сразу после дива с overflow:visible (значением по-умолчанию) Под блоком VisibleDiv ничего нету visible

body {margin:0 0 0 0; padding:0 0 60px 0; font-size:16px;} h2 {color:#CC0033;} p {float:left;} div { width:500px; height:auto; border:1px solid #555; padding:4px; margin:4px; } .VisibleDiv {overflow:visible;background: rgba(0,255,0,0.1);} .ignor {background: rgba(0,255,0,0.6); color:#FFFFFF; font-weight:bold;}

В первом случае, видно, что содержимое с свойством float выезжает за пределы блока и не учитываются им при определении высоты блока, во втором случае под блоком с overflow : visible ; специально размещен другой блок и закращен в другой цвет. Это не единственные примеры того, как может себя вести на странице такие блоки (с overflow : visible ; и height : auto ; ). Исправляется это заменой значения visible на hidden , следует помнить, что это свойство стоит указывать только блокам с height : auto ; , если будет фиксированная высота, то велик шанс, что содержимое просто скроется, если оно больше заданной высоты.

Вот как будет выглядеть исправленный вариант:

Так же у вас не возникнет такой проблемы, если блоку с overflow : visible ; и height : auto ; задано еще и какое-нибудь значение свойства float . Вообще во многих случаях отображение элементов зависит от набора свойств, а не от отдельных свойств.

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 можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Посмотреть работу скрипта на примере ниже.

Полосы прокрутки (Scroll bars) - это вертикальная и горизонтальная полоски, размещаемые вдоль правого (при письме слева на право) и нижнего краев окна или отдельной области внутри окна, предназначенные для перемещения содержимого в вертикальном или горизонтальном направлениях. Для управления их внешним видом и поведением в веб-страницах используются элементы языка описания стилей CSS (Cascading Style Sheets - «Каскадные таблицы стилей»), встроенные в язык HTML.

Инструкция

Используйте тег div, если нужно сделать полосу прокрутки не для всей страницы, а только для ограниченной ее области. В языке HTML (HyperText Markup Language - «язык разметки гипертекста») «тегами» называют отдельные команды браузеру отобразить тот или иной элемент страницы. В самом простом виде тег div (его часто называют «слоем») пишется так:
Это текст внутри слоя
Здесь - открывающий тег, а - закрывающий. Все, что размещено между открывающим и закрывающим тегами, находится в слое как в контейнере и этому контейнеру можно задавать размеры - ширину и высоту. Это делается с помощью дополнительного параметра («атрибута») style, который следует добавить в открывающий тег:

Это текст внутри слоя

Указывайте в атрибуте style тега div и правила для полос прокрутки слоя тоже:

Это текст внутри слоя

Здесь overflow:auto означает, что полосы прокрутки будут появляться автоматически, то есть когда содержимое слоя не будет умещаться в заданные размеры. Если auto заменить на scroll, то эти полосы будут присутствовать всегда, независимо от того нужны они или нет. А значение hidden окажет противоположное действие - прокрутка никогда не будет появляться, даже если содержимого этого контейнера не будет видно за его краями.

Применяйте аналогичный способ и для добавления полос прокрутки к странице в целом. По умолчанию они появляются по мере необходимости, но если по какой-либо причине возникнет необходимость в их постоянном присутствии на странице, то в исходный html-код следует добавить соответствующее правило стиля. Найдите в коде страницы закрывающий тег заголовочной части документа и перед ним впишите эти стилевые инструкции:
body {overflow:scroll;}

Совет 2: Как сделать полосу прокрутки

В наше время иметь собственный сайт – не роскошь, а скорее необходимость. Его создание требует определенных навыков и знания html. Создать простой сайт довольно просто. Однако его украшение и создание интерактивных элементов, обеспечивающих дополнительную функциональность сайта, вызовет у новичка трудности. Один из таких интерактивных элементов, повышающих удобство посетителей сайта – полоса прокрутки. Она особенно пригодится в полях сайта, обеспечивающих его связь со скриптами (взаимодействие сайта с пользователями).

Вам понадобится

Интернет или любой учебник по html

Инструкция

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

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

Между тегами BODY вы должны добавить стандартный код для скролла. Найти его можно в любом учебнике по html. Есть два варианта - либо добавить этот фрагмент напрямую в html код страницы, либо приложить в таблице стилей css. Второй способ удобнее, если вы меняете не одну страничку, а весь сайт сразу. Затем нужно ввести цветовые параметры полосы прокрутки, иначе она будет серой и неинтересной. На рисунке показаны и подписаны элементы скролла. Параметры нужно вводить так же, как показано на рисунке, через точку с запятой.

Теперь вы обязательно должны протестировать свои доработки. Чтобы полоса прокрутки одинаково смотрелась во всех браузерах, проверьте ее на основных - Internet Explorer, Mozilla Firefox и Opera. Если она не работает на одном из них, вернитесь к первому этапу и исправьте ошибки.

Полезный совет

Есть простой способ создания полосы прокрутки для web-страницы. Задайте параметр высоты для вашего сайта 75%, тогда скролл появится сам. Правда, его цветовые схемы все равно стоит настроить.

Совет 3: Как изменить полосу прокрутки

Инструкция

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

Сделайте жесткую привязку скролла (так еще могут называть полосу прокрутки) к какому-то конкретному элементу страницы. Это может быть текстовое поле, представляющее собой ниспадающий список. Рассчитайте место «парковки» полосы в пиксельном и процентном соотношении. Это вовсе не будет трудно, если страница четко структурирована.

Добавьте стандартный код полосы прокрутки между тегами body. Если вы не знаете о чем идет речь, скачайте любой учебник по html верстке. Там будет четко описано, как написать такой код. Лучше всего для таких случаев иметь под рукой готовые шаблоны аналогичных сайтов, чтобы можно было взять оттуда какие-то отдельные элементы программного кода, что значительно упрощает жизнь. Итак, вы нашли код. Расположите его либо непосредственно в самом коде страницы либо приложите его в таблицу 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"ов не являются проблемой в реализации, всё просто и легко осуществимо. Поэтому дерзайте, используйте, открывайте новое. Всегда буду рад услышать комментарии, вопросы, пожелания=).

От автора: статья нашего гостя, Питера Бизменса. Питер – 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 хака.