Css вертикальная прокрутка. Создание div с вертикальной прокруткой с использованием CSS
3. Принудительная установка вертикальной и горизонтальной прокрутки в блоке CSS
4. Пример div блока с прокруткой
В данной статье мы разберём вопрос создания блока (div) фиксированного размера с возможностью прокрутки по горизонтали и вертикали. Это можно реализовать средствами CSS. За это отвечает свойство overflow .
О полезном свойстве overflow
Свойство overflow отвечает за отображение содержания блочного элемента. Можно применить в том случае, когда контент не помещается полностью и выходит за область блока.overflow-x — отвечает за отображением содержания блочного элемента по горизонтали.
overflow-y — отвечает за отображением содержания блочного элемента по вертикали.
Код CSS
Prokrutka {
overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если содержимое больше блока */
}
Свойства и значения overflow
visible — отображается все содержание элемента, даже за пределами установленной ширины.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
А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации.
Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
Посмотреть работу скрипта на примере ниже.
Иногда необходимо большой кусок текста разместить в маленьком окошке, который полностью туда не помещается, для решения этой проблемы легко создать слой с прокруткой —
Понадобится
Слой с фиксированным размером и 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 минут; затем слейте воду и заправьте систему новой охлаждающей жидкостью.
Инструкция
Используйте тег div, если нужно полосу прокрутки не для всей страницы, а только для ограниченной ее области. В языке HTML (HyperText Markup Language — «язык разметки гипертекста») «тегами» называют отдельные команды браузеру отобразить тот или иной элемент страницы. В самом простом виде тег div (его часто называют «слоем») так:
Это внутри слоя
Здесь
— открывающий тег, а
— закрывающий. Все, что размещено между открывающим и закрывающим тегами, находится в слое как в контейнере и этому контейнеру можно задавать размеры — ширину и высоту. Это делается с помощью дополнительного параметра («атрибута») style, который следует в открывающий тег:Это текст внутри слоя
Указывайте в атрибуте style тега div и правила для полос прокрутки слоя тоже:
Это текст внутри слоя
Здесь overflow:auto , что полосы прокрутки будут появляться автоматически, то есть когда содержимое слоя не будет умещаться в заданные размеры. Если auto заменить на scroll, то эти полосы будут присутствовать всегда, независимо от того нужны они или нет. А значение hidden окажет противоположное действие — не будет появляться, даже если содержимого этого контейнера не будет видно за его краями.
В наше время иметь собственный сайт – не роскошь, а скорее необходимость. Его создание требует определенных навыков и знания html. Создать простой сайт довольно просто. Однако его украшение и создание интерактивных элементов, обеспечивающих дополнительную функциональность сайта, вызовет у новичка трудности. Один из таких интерактивных элементов, повышающих удобство посетителей сайта – полоса прокрутки . Она особенно пригодится в полях сайта, обеспечивающих его связь со скриптами (взаимодействие сайта с пользователями).
Вам понадобится
- Интернет или любой учебник по html
Инструкция
Самое главное на любом — удобство . Сама идея применения полосы прокрутки на вашем сайте будет уместна только в том случае, если ее продиктовано не вашим желанием, а ее необходимостью. Сделайте макет , на которую вы хотите поместить полосу прокрутки . Выберете место для скролла (так еще называют полосы прокрутки ).
Выберите место для полосы прокрутки на интересующей вас странице . Она должна быть жестко связана с каким-либо элементом (например, текстовым полем или ниспадающим списком). Это место вы должны рассчитать в пикселях или в процентах. Сделать это нетрудно, особенно если макет сайта имеет ясную структуру.
Между тегами BODY вы должны добавить стандартный код для скролла. Найти его можно в любом учебнике по html. Есть два варианта — либо добавить этот фрагмент напрямую в html код страницы, либо приложить в таблице стилей css. Второй способ удобне
CSS3 | Прокрутка элементов
Прокрутка элементов
Последнее обновление: 21.04.2016
Нередко при создании веб-страниц можно столкнуться с ситуацией, когда содержимое блока занимает гораздо больше места, чем сам определено шириной и высотой блока. В этой ситуации по умолчанию браузер все равно отображает содержимое, даже если оно выходит за границы блока.
Однако свойство overflow позволяет настроить поведение блока в подобной ситуации и добавить возможность прокрутки. Это свойство может принимать следующие значения:
auto: если контент выходит за границы блока, то создается прокрутка. В остальных случаях полосы прокрутки не отображаютсяhidden: отображается только видимая часть контента. Контент, который выходит за границы блока, не отображается, а полосы прокрутки не создаютсяscroll: в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос прокрутки не требуетсяvisible: значение по умолчанию, контент отображается, даже если он выходит за границы блока
Рассмотрим применение двух значений:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прокрутка в CSS3</title>
<style>
.article1{
width: 300px;
height: 150px;
margin:15px;
border: 1px solid #ccc;
overflow: auto;
}
.article2{
width: 300px;
height: 150px;
margin:15px;
border: 1px solid #ccc;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть
колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и
горя – ничего не было видно. Да, это тот самый дуб», – подумал князь
Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.</p>
</div>
<div>
<p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть
колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и
горя – ничего не было видно. Да, это тот самый дуб», – подумал князь
Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.</p>
</div>
</body>
</html>
Свойство overflow управляет полосами прокрутки как по вертикали, так и по горизонтали. С помощью дополнительных свойств
overflow-x и overflow-y можно определить прокрутку соответственно по горизонтали и по вертикали. Данные свойства
принимают те же значения, что и overflow:
overflow-x: auto; overflow-y: hidden;
seodon.ru | CSS справочник — overflow-y
Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
Свойство CSS overflow-y указывает, каким образом отображать содержимое элемента, если оно превышает его размер по вертикали. Дело в том, что в таких ситуациях браузеры показывают не вместившееся содержимое прямо поверх элемента и его окружения с верхней или нижней стороны, но с помощью overflow-y можно сделать так, чтобы у элемента появилась вертикальная полоса прокрутки (скроллинг) или «лишнее» было просто обрезано.
На следующем изображении показано два блочных элемента — родительский (с разными значениями overflow-y) и дочерний.
Пример с разными значениями overflow-y.
Для изменения отображения по горизонтали используется свойство overflow-x, сразу в обоих направлениях — overflow.
Тип свойства
Назначение: форматирование.
Применяется: к незамещаемым блочным элементам (<DIV>, <P> и т.д.) и незамещаемым элементам с display равным inline-block.
Наследуется: нет.
Значения
Значением свойства overflow-y является одно из ключевых слов, указывающее способ отображения содержимого элемента по вертикали.
- auto — браузер добавляет полосу прокрутки, но только когда это необходимо.
- visible — не вместившееся содержимое отображается за границами элемента.
- hidden — все, что не вместится в размеры элемента, будет просто обрезано (скрыто).
- scroll — полоса прокрутки добавляется всегда, независимо от количества содержимого элемента.
Процентная запись: не существует.
Значение по умолчанию: visible.
Обратите внимание, что если overflow-y не равен visible, то браузеры по умолчанию устанавливают такое же значение и для overflow-x. Причем отображение по горизонтали потом можно переопределить, но нельзя установить обратно в visible.
Синтаксис
overflow-y: auto | visible | hidden | scroll
Пример CSS: использование overflow-y
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS свойство overflow-y</title>
<style type="text/css">
p {
width: 200px; /* ширина параграфа */
height: 130px; /* высота */
overflow-x: hidden; /* обрезаем по горизонтали */
overflow-y: scroll; /* вертикальный скроллинг */
}
</style>
</head>
<body>
<p><img src="images/plane.png" alt="Самолет"></p>
</body>
</html>Результат примера
Результат. Использование свойства CSS overflow-y.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Нет | Нет | Нет | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | ||
| Версия: | 6.0 | 7.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 | 9.6 и выше | 3.1 и выше |
| Поддержка: | Частично | Да | Да | Да | Нет | Да | Да |
IE 6.0:
- Если свойство overflow-y не указано или равно visible, то он увеличивает высоту элемента, чтобы вместить содержимое.
- Если у <HTML> явно указано overflow-y:visible, то окно браузера фиксируется и не скролится при любой высоте страницы, а также игнорируются любые значения overflow-y для тега <BODY>.
Прокрутка элементов CSS | Как создать сайт
Прокрутка элементов CSS
Здравствуйте! От темы обтекание элемнтов в css переходим к прокурутке элементов. Нередко при создании веб-страниц можно столкнуться с ситуацией, когда содержимое блока занимает гораздо больше места, чем сам определено шириной и высотой блока. В этой ситуации по умолчанию браузер все равно отображает содержимое, даже если оно выходит за границы блока.
Однако свойство overflow позволяет настроить поведение блока в подобной ситуации и добавить возможность прокрутки. Это свойство может принимать следующие значения:
- auto: если контент выходит за границы блока, то создается прокрутка. В остальных случаях полосы прокрутки не отображаются
- hidden: отображается только видимая часть контента. Контент, который выходит за границы блока, не отображается, а полосы прокрутки не создаются
- scroll: в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос прокрутки не требуется
- visible: значение по умолчанию, контент отображается, даже если он выходит за границы блока
Рассмотрим применение двух значений:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прокрутка в CSS3</title>
<style>
.article1{
width: 300px;
height: 150px;
margin:15px;
border: 1px solid #ccc;
overflow: auto;
}
.article2{
width: 300px;
height: 150px;
margin:15px;
border: 1px solid #ccc;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть
колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и
горя – ничего не было видно. Да, это тот самый дуб», – подумал князь
Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.</p>
</div>
<div>
<p>Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть
колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и
горя – ничего не было видно. Да, это тот самый дуб», – подумал князь
Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.</p>
</div>
</body>
</html>
Просмотреть пример
Свойство overflow управляет полосами прокрутки как по вертикали, так и по горизонтали. С помощью дополнительных свойств overflow-x и overflow-y можно определить прокрутку соответственно по горизонтали и по вертикали. Данные свойства принимают те же значения, что и overflow:
overflow-x: auto; overflow-y: hidden;
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Поделиться
Твитнуть
Поделиться
Также читайте
скрытый добавляет вертикальную полосу прокрутки [дубликат]
На этот вопрос уже есть ответ здесь:
Когда я указываю overflow-x: hidden для элемента, который переполняется как горизонтально, так и вертикально, элемент получает вертикальную полосу прокрутки в дополнение к скрытию горизонтально переполненный контент. Я попытался добавить overflow-y: visible и даже просто overflow: visible безрезультатно.
Я неправильно понимаю, что делают эти свойства? Я думаю, что overflow-x вообще не должно влиять на вертикальное переполнение.
Это происходило в каждом браузере, который я пробовал.
Вот фрагмент, который демонстрирует эффект. Я использую теги <pre>, потому что это простой способ создания переполненного контента, но, похоже, это происходит с любым тегом.
pre {
height: 40px;
width: 150px;
margin-bottom: 50px; /* We need this so they don't overlap. */
}
#x-hidden {
overflow-x: hidden;
}
#y-visible {
overflow-x: hidden;
overflow-y: visible;
}
#visible {
overflow: visible;
overflow-x: hidden;
} <pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.
Cras aliquet convallis efficitur.
</pre>
<pre>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
Integer mollis quis magna quis vulputate.