Как добавить элементу полосу прокрутки по вертикали в html
Нередко при создании веб-страниц можно столкнуться с ситуацией, когда содержимое блока занимает гораздо больше места, чем сам определено шириной и высотой блока. В этой ситуации по умолчанию браузер все равно отображает содержимое, даже если оно выходит за границы блока.
Однако свойство overflow позволяет настроить поведение блока в подобной ситуации и добавить возможность прокрутки. Это свойство может принимать следующие значения:
- auto : если контент выходит за границы блока, то создается прокрутка. В остальных случаях полосы прокрутки не отображаются
- hidden : отображается только видимая часть контента. Контент, который выходит за границы блока, не отображается, а полосы прокрутки не создаются
- scroll : в блоке отображаются полосы прокрутки, даже если контент весь помещается в границах блока, и таких полос прокрутки не требуется
- visible : значение по умолчанию, контент отображается, даже если он выходит за границы блока
Рассмотрим применение двух значений:
Прокрутка в CSS3 .article1 < width: 300px; height: 150px; margin:15px; border: 1px solid #ccc; overflow: auto; >.article2Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и горя – ничего не было видно. Да, это тот самый дуб», – подумал князь Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.
Старый дуб, весь преображенный, раскинувшись шатром сочной, темной зелени, млел, чуть колыхаясь в лучах вечернего солнца. Ни корявых пальцев, ни болячек, ни старого недоверия и горя – ничего не было видно. Да, это тот самый дуб», – подумал князь Андрей, и на него вдруг нашло беспричинное весеннее чувство радости и обновления.
Свойство overflow управляет полосами прокрутки как по вертикали, так и по горизонтали. С помощью дополнительных свойств overflow-x и overflow-y можно определить прокрутку соответственно по горизонтали и по вертикали. Данные свойства принимают те же значения, что и overflow :
overflow-x: auto; overflow-y: hidden;
overflow-y
Свойство overflow-y управляет отображением содержания блочного элемента по вертикали, если контент целиком не помещается и выходит за область сверху или снизу от блока.
Синтаксис
overflow-y: auto | hidden | scroll | visible
Значения
visible Отображается все содержание элемента, даже за пределами установленной высоты. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляется вертикальная полоса прокрутки. auto В зависимости от браузера. В основном, вертикальная полоса прокрутки добавляется только при необходимости.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
overflow-y Duis te feugifacilisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства overflow-y
Объектная модель
[window.]document.getElementById(» elementID «).style.overflowY
overflow-y
Свойство overflow-y управляет отображением содержания блочного элемента по вертикали, если контент целиком не помещается и выходит за область сверху или снизу от блока.
Краткая информация
| Значение по умолчанию | visible |
|---|---|
| Наследуется | Нет |
| Применяется | К блочным элементам |
| Анимируется | Нет |
Синтаксис
overflow-y: auto | hidden | scroll | visibleСинтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Значения
visible Отображается всё содержимое элемента, даже за пределами установленной высоты. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляется вертикальная полоса прокрутки. auto Вертикальная полоса прокрутки добавляется только при необходимости.
Песочница
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
auto hidden scroll visible
Пример
Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь.
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства overflow-y
Объектная модель
Объект.style.overflowY
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Basic Box Model | Рабочий проект |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
| 5 | 12 | 1 | 9.5 | 3 | 3.5 |
| 1 | 1 | 10 | 3 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
- overflow
- overflow-x
- Отслеживание прокрутки
Нет вертикальной полосы прокрутки
Здравствуйте! У меня есть каталог организаций, я вывожу его в 3 колонки. При разрешении 1920 x 1080 есть вертикальная полоса прокрутки, а при 1024 х 600 она отсутствует! Как включить отображение? Скрин 1024 х 600:
Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
задан 9 янв 2014 в 6:25
Дмитрий333332 Дмитрий333332
39 2 2 серебряных знака 6 6 бронзовых знаков
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Рабочий пример на jsFiddle
height: 100px; /* Должна быть задана высота блока */ overflow-y: scroll; Отслеживать
ответ дан 9 янв 2014 в 7:08
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак