X overflow scroll: overflow-x — CSS: Cascading Style Sheets

Leave a Comment / Разное / By /

Содержание

overflow-x | CSS | WebReference

  • Содержание
    • Краткая информация
    • Синтаксис
    • Значения
    • Песочница
    • Пример
    • Спецификация
    • Браузеры

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

Значение по умолчаниюvisible
НаследуетсяНет
ПрименяетсяК блочным элементам
АнимируетсяНет

Синтаксис 

overflow-x: auto | hidden | scroll | visible

Обозначения

ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).
normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

visible
Отображается всё содержимое элемента, даже за пределами установленной ширины.
hidden
Отображается только область внутри элемента, остальное будет скрыто.
scroll
Всегда добавляется горизонтальная полоса прокрутки.
auto
Горизонтальная полоса прокрутки добавляется только при необходимости.

Песочница

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

auto hidden scroll visible

div {
  white-space: pre;
  overflow-x: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>overflow-x</title> <style> .layer { overflow-x: scroll; /* Добавляем полосу прокрутки */ width: 300px; /* Ширина блока */ height: 150px; /* Высота блока */ padding: 5px; /* Поля вокруг текста */ border: solid 1px black; /* Параметры рамки */ white-space: nowrap; /* Запрещаем перенос строк */ } </style> </head> <body> <div> <h3>Гетерогенный голубой гель</h3> <p>Кондуктометрия мягко передает электронный способ получения независимо от последствий проникновения метилкарбиола внутрь.
</p> </div> </body> </html>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow-x

Объектная модель

Объект.style.overflowX

Спецификация

СпецификацияСтатус
CSS Overflow Module Level 3Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

51219.533.5
11103

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Форматирование

См. также

  • overflow
  • overflow-y

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

Overflow CSS уроки для начинающих академия

❮ Назад Дальше ❯

Свойство CSS overflow управляет тем, что происходит с содержимым, которое слишком велико для размещения в области.

This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.


CSS Overflow

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

Свойство overflow имеет следующие значения:

  • visible — По умолчанию. Переполнение не обрезается. Он вырисовывается вне поля элемента
  • hidden — Переполнение обрезается, а остальное содержимое будет невидимым
  • scroll — Переполнение обрезается, но для просмотра остальной части содержимого добавляется полоса прокрутки
  • auto — Если переполнение обрезано, необходимо добавить полосу прокрутки для просмотра оставшейся части содержимого

Примечание: Свойство overflow работает только для элементов блока с заданной высотой.

Примечание: В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если задано «переполнение: прокрутка»).

переполнение: видимый

По умолчанию переполнение является visible, что означает, что оно не обрезается и отображается вне поля элемента:

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

Пример

div {
    width: 200px;
    height: 50px;
    background-color: #eee;
    overflow: visible;
}

переполнение: скрытый

При значении hidden переполнение обрезается, а оставшаяся часть содержимого скрывается:

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

Пример

div {
    overflow: hidden;
}

переполнение: прокрутка

Установка значения scroll , переполнение обрезается и полосы прокрутки добавляется, чтобы прокручивать внутри окна. Обратите внимание, что это добавит полосу прокрутки как горизонтально, так и вертикально (даже если она вам не нужна):

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

Пример

div {
    overflow: scroll;
}

переполнение: Авто

Значение auto аналогично scroll, только при необходимости добавляются полосы прокрутки:

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

Пример

div {
    overflow: auto;
}

overflow-x и overflow-y

Свойства overflow-x и overflow-y указывает, следует ли изменять overflow содержимого только по горизонтали или по вертикали (или оба):

overflow-x Указывает, что делать с левыми/правыми краями содержимого.
overflow-y Указывает, что делать с верхними/нижними краями содержимого.

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

Пример

div {
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: scroll; /* Add vertical scrollbar */
}

Все свойства переполнения CSS

СвойствоDescription
overflowУказывает, что происходит, если содержимое переполнено полем элемента
overflow-xУказывает, что делать с левыми/правыми краями содержимого, если оно переполнено областью содержимого элемента
overflow-yУказывает, что делать с верхними/нижними краями содержимого, если оно переполнено областью содержимого элемента

❮ Назад Дальше ❯

Свойство overflow — обработка вылезающего содержимого

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

Синтаксис

селектор { overflow: hidden | scroll | auto | visible; }

Значения

ЗначениеОписание
hiddenСкрывает то содержимое, которое вылезло за границы блока.
scroll Добавляет полосы прокрутки, причем всегда, даже если ничего не вылазит (в этом случае они будут неактивными).
auto Добавляет полосы прокрутки при необходимости: если содержимое не помещается — они появятся, если все помещается — их не будет.
visibleНе скрывает то содержимое, которое вылезло за границы блока.

Значение по умолчанию: visible.

Пример . Значение visible

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы. Обрезания не происходит:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>

#elem { overflow: visible; border: 1px solid red; width: 200px; }

:

Пример . Значение visible

А сейчас ограничена не только ширина, но и высота (текст вылезет за блок и по высоте):

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { width: 200px; height: 40px; overflow: visible; border: 1px solid red; margin-bottom: 20px; }

:

Пример .

Значение hidden

Сейчас все, что вылезло за границы контейнера просто обрежется (и по высоте тоже). Обратите внимание на то, что обрезание по высоте происходит только тогда, когда она задана явно (в нашем случае height: 40px). В противном случае текст расширяет контейнер по высоте — и никакого обрезания не будет:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { overflow: hidden; width: 200px; height: 40px; border: 1px solid red; }

:

Пример . Значение scroll

При значении scroll полосы прокрутки будут всегда, даже если ничего не вылазит (в этом случае они будут неактивными). Сейчас текст не вылазит ни по ширине, ни по высоте, но полосы прокрутки все равно есть (неактивные):

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { overflow: scroll; width: 400px; height: 100px; border: 1px solid red; }

:

Пример . Значение auto

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

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { overflow: auto; width: 400px; height: 100px; border: 1px solid red; }

:

Пример . Значение auto

А теперь ограничим ширину — появится горизонтальная полоса прокрутки:

<div> Lorem ipsum dolor sit amet оооооооооооооооооооооооооооооченьдлинноеслово, consectetur adipiscing elit. </div>#elem { width: 200px; overflow: auto; height: 100px; border: 1px solid red; }

:

Смотрите также

  • свойство word-break,
    переносящее буквы длинного слова на новую строку
  • свойство overflow-wrap,
    переносящее буквы длинного слова на новую строку
  • свойство overflow-x,
    которое обрезает вылезающие по горизонтали части
  • свойство overflow-y,
    которое обрезает вылезающие по вертикали части

Как создать div блок с прокруткой?

1.

Что такое overflow в CSS?

2.

Свойства и значения overflow

3.

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

4.

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

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

О полезном свойстве overflow

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

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

Код CSS

.prokrutka {

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

}

Свойства и значения overflow

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

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

Код CSS

.prokrutka {

width:150px; /* ширина нашего блока */

height:100px; /* высота нашего блока */

background: #fff; /* цвет фона, белый */

border: 1px solid #C1C1C1; /* размер и цвет границы блока */

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

}

Принудительная установка прокрутки в блоке CSS

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

Код HTML и CSS

.prokrutka {

height:150px; /* высота нашего блока */

background: #fff; /* цвет фона, белый */

border: 1px solid #C1C1C1; /* размер и цвет границы блока */

overflow-x: scroll; /* прокрутка по горизонтали */

overflow-y: scroll; /* прокрутка по вертикали */

}

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

Код HTML и CSS

<html>

  <head>

    <title>Пример работы CSS</title>

<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<style>

.prokrutka {

height: 200px; /* высота нашего блока */

width: 200px; /* ширина нашего блока */

background: #fff; /* цвет фона, белый */

border: 1px solid #C1C1C1; /* размер и цвет границы блока */

overflow-x: scroll; /* прокрутка по горизонтали */

overflow-y: scroll; /* прокрутка по вертикали */

}

</style>
  </head>
  <body>

<div class="prokrutka">

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

</div>

  </body>

</html>

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

Демонстрация Скачать исходники

Можно указать принудительную прокрутку только для одной оси. Для этого соответственно уберите строку либо с overflow-x, либо с overflow-y.

Спасибо за внимание! Надеюсь статья была полезна!

переполнения — CSS: Каскадные таблицы стилей

Сокращенное свойство CSS overflow задает желаемое поведение для переполнения элемента — т. е. когда содержимое элемента слишком велико, чтобы поместиться в контекст форматирования блока — в обоих направлениях.

Это свойство является сокращением для следующих свойств CSS:

  • overflow-x
  • переполнение-у 
 /* Значения ключевых слов */
переполнение: видимое;
переполнение: скрыто;
перелив: зажим;
переполнение: прокрутка;
переполнение: авто;
переполнение: скрытое видимое;
/* Глобальные значения */
переполнение: наследовать;
переполнение: начальное;
переполнение: вернуться;
переполнение: обратный слой;
переполнение: не установлено;

Свойство overflow указывается как одно или два ключевых слова, выбранных из списка значений ниже. Если указаны два ключевых слова, первое применяется к overflow-x , а второе — к overflow-y . В противном случае оба параметра overflow-x и overflow-y имеют одинаковое значение.

Значения

видимые

Содержимое не обрезается и может отображаться за пределами поля заполнения.

скрытый

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

зажим

Подобно hidden , содержимое обрезается до поля заполнения элемента. Разница между clip и hidden заключается в том, что ключевое слово clip также запрещает любую прокрутку, включая программную прокрутку. Поле не является контейнером прокрутки и не запускает новый контекст форматирования. Если вы хотите запустить новый контекст форматирования, вы можете использовать для этого display: flow-root .

свиток

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

авто

Зависит от пользовательского агента. Если содержимое помещается внутри поля заполнения, оно выглядит так же, как visible , но по-прежнему устанавливает новый контекст форматирования блока. Настольные браузеры предоставляют полосы прокрутки, если содержимое выходит за пределы.

накладка Устаревший

Ведет себя так же, как auto , но с полосами прокрутки, нарисованными поверх содержимого, а не занимающими место.

Расширения Mozilla
-moz-полосы прокрутки-нет Устаревший

Вместо этого использовать переполнение : скрытый .

-moz-полосы прокрутки-горизонтальные Устаревший

Использовать переполнение-x : прокрутить и переполнение-y : скрытый или переполнение: вместо этого прокрутить скрытый .

-moz-полосы прокрутки-вертикальный Устаревший

Использовать overflow-x : скрыто и overflow-y : прокрутить или переполнение: скрыть прокрутку вместо этого.

-moz-скрытый-непрокручиваемый Not for use in new websites.»> Устаревший

Использовать переполнение : вместо этого обрезать .

Начиная с Firefox 63, -moz-scrollbars-none , -moz-scrollbars-horizontal и -moz-scrollbars-vertical находятся за настройкой предпочтения функции. В about:config установите layout.css.overflow.moz-scrollbars.enabled на true .

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

При указании значения, отличного от visible (по умолчанию) или clip , создается новый контекст форматирования блока. Это необходимо по техническим причинам — если плавающий элемент пересекался с прокручиваемым элементом, он принудительно перематывал содержимое после каждого шага прокрутки, что приводило к медленной прокрутке.

Чтобы переполнение имело эффект, блочный контейнер должен иметь заданную высоту ( height или max-height ) или пробел установить на nowrap .

Установка для одной оси значения visible (по умолчанию) при установке для другой оси другого значения приводит к тому, что visible ведет себя как auto .

Свойство JavaScript Element.scrollTop может использоваться для прокрутки элемента HTML, даже если overflow имеет значение hidden .

 переполнение = 
 [ видимый | скрытый | клип | прокрутить | авто ]{1,2}

Установка различных значений переполнения для текста

HTML 
 

  видимый
  <р>
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    долоремке лаудантиум.
  



<дел>
скрытый
<р>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
долоремке лаудантиум.
<дел> прокрутить <р> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium долоремке лаудантиум.

<дел> авто <р> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium долоремке лаудантиум.

CSS 
 корпус {
  дисплей: гибкий;
  выравнивание содержимого: пространство вокруг;
}
дел {
  поле: 1em;
  размер шрифта: 1.2em;
}
п {
  ширина: 8em;
  высота: 5см;
  граница: пунктирная;
}
стр. видимый {
  переполнение: видимое;
}
п.скрытый {
  переполнение: скрыто;
}
p.scroll {
  переполнение: прокрутка;
}
п.авто {
  переполнение: авто;
}
Результат
Спецификация
Неизвестная спецификация
# propdef-overflow

Таблицы BCD загружаются только в браузере

с включенным JavaScript. Включите JavaScript для просмотра данных.
  • Связанные свойства CSS: Text-Overflow , Белое пространство , Overflow-X , Overflow-Y , Overflow-Inline , Block , Clip , .
  • Переполнение CSS и прокручиваемое переполнение отладки

Последнее изменение: , участниками MDN

CSS | overflow-x Property - GeeksforGeeks

< html >

< head >

     < style >

     div.example1 {

         background-color: green;

         ширина: 80 пикселей;

         переполнение-x: прокрутка;

}

Div. Example2 {

Фоновое колорие: зеленый;

         ширина: 80 пикселей;

         переполнение-x: скрыто;

     }

      

     div.example3 {

         background-green;

         ширина: 80 пикселей;

         переполнение-x: авто;

}

Div. Example4 {

Фоновое колорие: зеленый;

         ширина: 80 пикселей;

         переполнение-x: видимое;

     }

     style >

head >

< body >

     < h2 >Гики для гиков H2 >

< P >

. , добавить полосу прокрутки или отобразить

         переполнение содержимого блочного элемента,

         , когда он переполняется по левому и правому краям.

     p >

 

 

      

     < h3 >overflow-x: scroll: h3 >

     < дел.4 Geeksforgeeks Computer Science Portal

Div >

> > > > > > > > > > > > > > > > > > > > > > > >

. >

< Div Класс = "Пример2" >

Geeksforgeeks Computer Science Portal

Div >

<

. >

< Div Класс = "Пример 3" >

Geeksforgeeks Computer Sciente Portal

Geeksforgeeks Computing Sciente Portal

Geeksforgeeks Computer Science Portal0005

Div >

< H3 > Overflow-X: Visible (AFAUL

< Div Класс = "Пример 4" >

Geeksforgeeks Computer Science Portal

     div >

body >

html >                   

html - Scroll-x поскольку переполнение не работает - вместо y отображается полоса прокрутки

Asked

Изменено 4 года 10 месяцев назад

Просмотрено 1k раз

Я пытаюсь понять, почему я не могу прокручивать горизонтально, чтобы увидеть другие розовые большие пальцы. Я добавил переполнение scroll-x в контейнер thumbs и подумал, что это позволит мне прокручивать по горизонтали, чтобы увидеть другие thumbs; вместо этого он прокручивается только вертикально.

Может кто-нибудь объяснить, почему он не прокручивается по горизонтали? огромное спасибо

 #content-wrap {
  фон: светло-зеленый;
  ширина: 300 пикселей;
  высота: 300 пикселей;
}
#основное изображение {
  фон: голубой;
  ширина: 300 пикселей;
  высота: 250 пикселей;
  плыть налево;
}
#thumbs-обертка {
  фон: оранжевый;
  ширина: 300 пикселей;
  высота: 50 пикселей;
  плыть налево;
  переполнение-x: прокрутка;
}
.большой палец {
  фон: розовый;
  box-sizing: граница-коробка;
  ширина: 75 пикселей;
  высота: 50 пикселей;
  граница: 2 пикселя сплошного серого цвета;
  плыть налево;
} 
 <дел>
  <дел>
  <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>
    <дел>