Переполнение

Подкаст CSS - 034: Переполнение

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

В CSS есть два различных параметра обрезки: text-overflow поможет с отдельными строками текста, а свойства overflow помогут контролировать переполнение в блочной модели.

Переполнение одной строки с помощью text-overflow

Используйте свойство text-overflow для любого элемента, содержащего текстовые узлы, например, абзаца <p> . Оно определяет, как текст будет выглядеть, если он не помещается в доступное пространство элемента. Весь видимый HTML-текст на странице находится в текстовых узлах . Для использования text-overflow требуется одна строка текста без переноса, поэтому необходимо также установить overflow как hidden и задать значение white-space предотвращающее перенос.

p {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

Использование свойств переполнения

Свойства переполнения задаются для элемента, чтобы контролировать действия, которые выполняются, когда его дочерним элементам требуется больше места, чем доступно. Это может быть сделано намеренно, например, в интерактивной карте, например, в Google Картах, где пользователь перемещается по большому изображению, обрезанному до определённого размера. Это может быть сделано и непреднамеренно, например, в чат-приложении, где пользователь вводит длинное сообщение, не помещающееся в текстовую область.

Переполнение можно представить в виде двух частей. Родительский элемент имеет жёстко ограниченное пространство, которое не меняется. Это можно представить как окно. Дочерние элементы — это контент, которому требуется больше пространства от родительского элемента. Это можно представить как то, на что вы смотрите через окно. Управление переполнением поможет определить, как окно обрамляет этот контент.

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

Свойство overflow-y управляет физическим переполнением вдоль вертикальной оси области просмотра устройства, тем самым прокручивая вверх и вниз.

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

Логические свойства направления прокрутки

Свойства overflow-inline и overflow-block устанавливают переполнение на основе направления документа и режима письма.

Сокращение overflow

Сокращенная запись overflow задает стили overflow-x и overflow-y в одной строке:

overflow: hidden scroll;

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

Ценности

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

overflow: visible (по умолчанию)

Если свойство не задано, для веб-страниц по умолчанию будет использоваться overflow: visible . Это гарантирует, что контент никогда не будет непреднамеренно скрыт, и соответствует основным принципам «никогда не скрывайте контент» и «безопасные макеты точных макетов».

overflow: hidden

С overflow: hidden содержимое обрезается в указанном направлении, и для его отображения не предусмотрены полосы прокрутки.

overflow: scroll

overflow: scroll позволяет использовать полосы прокрутки, позволяя пользователям прокручивать контент. Даже если контент не переполняется, полосы прокрутки будут присутствовать. Это отличный способ уменьшить будущие смещения макета, если контейнер может прокручиваться в будущем, например, при изменении размера, и визуально подготовить пользователя к прокручиваемым областям.

overflow: clip

Как и при использовании overflow: hidden , содержимое с overflow: clip обрезается по внутреннему отступу элемента. Разница между clip и hidden заключается в том, что ключевое слово clip также запрещает любую прокрутку, включая программную.

overflow: auto

Наконец, наиболее часто используемое значение — overflow: auto . Оно учитывает предпочтения пользователя и при необходимости отображает полосы прокрутки, но по умолчанию скрывает их, перекладывая ответственность за прокрутку на пользователя и браузер.

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

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

Прокрутка и доступность

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

Чтобы разрешить прокручиваемому полю принимать фокус, добавьте tabindex="0" , имя с атрибутом aria-labelledby и соответствующий атрибут role . Например:

<div tabindex="0" role="region" aria-labelledby="id-of-descriptive-text">
    content
</div>

Затем можно использовать CSS для указания того, что блок имеет фокус, используя свойство outline для визуального указания, что теперь его можно прокручивать.

В статье «Использование CSS для обеспечения доступности» Адриан Роселли демонстрирует, как CSS может помочь предотвратить ухудшение доступности. Например, можно включить прокрутку и добавить индикатор фокуса только при использовании правильных атрибутов. Следующие правила сделают блок прокручиваемым только при наличии атрибутов tabindex , aria-labelledby и role .

[role][aria-labelledby][tabindex] {
  overflow: auto;
}

[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid blue;
}

Позиционирование полосы прокрутки в блочной модели

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

корневой скроллер против неявного скроллера

Вы можете заметить, что некоторые скроллеры имеют функцию обновления при натяжении и другие особенности поведения, особенно при разработке мобильных и гибридных приложений. Это поведение прокрутки происходит на корневом скроллере. На странице всегда есть только один корневой скроллер. По умолчанию корневым скроллером страницы является documentElement , однако, изменив корневой скроллер, можно применить особые особенности поведения к скроллерам, отличным от documentElement. Мы называем этот новый скроллер неявным корневым скроллером.

Чтобы создать корневой скроллер, можно использовать так называемое продвижение скроллера , позиционируя контейнер как фиксированный, обеспечивая покрытие всей области просмотра и z-индекс поверх скроллера. Сравните корневой скроллер с вложенным неявным скроллером здесь .

Стилизация полосы прокрутки

Вы можете оформить полосу прокрутки так, чтобы она гармонично вписалась в дизайн вашего сайта. scrollbar-color задает цвет бегунка и отступа полосы прокрутки.

Чтобы изменить ширину полосы прокрутки, используйте scrollbar-width . Вы не можете задать произвольную длину, но можете указать, нужна ли вам thin полоса прокрутки или none .

поведение прокрутки

scroll-behavior позволяет включить управляемую браузером прокрутку к элементам. Это позволяет указать, как будет обрабатываться внутристраничная навигация, например .scrollTo() или ссылки.

Это особенно полезно при использовании с prefers-reduced-motion для указания поведения прокрутки на основе предпочтений пользователя.

@media (prefers-reduced-motion: no-preference) {
  .scroll-view {
    scroll-behavior: auto;
  }
}

поведение при прокрутке

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

Привязка прокрутки

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

Настройка контейнера прокрутки

Чтобы включить привязку прокрутки, добавьте scroll-snap-type к контейнеру прокрутки. Сначала определите, по какой оси будет происходить привязка прокрутки. Это может быть логическое свойство ( block или inline ), физическое свойство ( x или y ) или и то, both .

Вы также можете определить, насколько строгой должна быть привязка к прокрутке. Значение по умолчанию — proximity , что означает, что контейнер прокрутки будет пытаться привязаться, если это возможно. Вы также можете установить значение « mandatory , чтобы контейнер прокрутки всегда привязывался к прокрутке.

.scroll-container {
    scroll-snap-type: block mandatory;
}

Привязка к прокрутке выравнивает элемент по всем границам контейнера прокрутки, но что произойдёт, если часть контейнера прокрутки не видна? Например, у вас может быть фиксированный заголовок, перекрывающий часть контейнера прокрутки. Чтобы выровнять прикреплённые элементы по видимой части контейнера прокрутки, можно задать свойство scroll-padding .

Управление фиксируемыми элементами

Чтобы сделать элемент привязываемым, установите для свойства scroll-snap-align значение start , end или center . Если направление привязки прокрутки равно both , можно задать два значения. Это определяет, будет ли край элемента выравниваться по краю области прокрутки или он будет центрирован.

Вы можете настроить расстояние по краям прикрепленного элемента с помощью scroll-margin :

scroll-margin также используется для установки отступа при прокрутке к элементу:

Чтобы сделать прокрутку более плавной, можно добавить scroll-snap-stop: always к элементу в контейнере прокрутки. Это не помешает прокрутке нескольких элементов за один прокрут. Если завершить прокрутку так, чтобы она продолжалась по инерции, прокрутка завершится в следующей точке привязки, а не продолжится.

Проверьте свое понимание

Ресурсы

Переполнение и потеря данных в CSS от журнала Smashing Magazine